웹에서 마우스 포커스에 따른 효과는 어떻게 변경하나요? 자바스크립트,제이쿼리?


블로그의 글 목록이나 포스트, 이미지 에 마우스를 가져다대면 크기나 모양이 변하는 기능이 제이쿼리 인가요? 자바스크립트 인가요? 맞으면 배울곳이 어디 있을까요?

  • 2016년 06월 30일에 수정됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.
  • 2016년 06월 30일에 작성됨

조회수 334


1 답변


기본적으로 CSS로 처리합니다.

다음은 마우스커서를 변경하는 CSS 스타일들입니다.

cursor:auto           --> 마우스 커서가 가리키는 내용에 따라 자동으로 적용.
cursor:crosshair   --> + 모양의 커서
cursor:default        --> 기본 커서
cursor:pointer        --> 손가락 모양의 커서(운영체제 혹은 설정에 따라 다를 수 있음)
cursor:move           --> 이동 화살표(십자로 교차하는 화살표)
cursor:e-resize       --> 오른쪽 화살표( 오른쪽으로 크기 변경 의미)
cursor:ne-resize     --> 우상단 화살표 (대각우측위로 크기 변경 의미)
cursor:nw-resize     --> 좌상단 화살표 (대각좌측위로 크기 변경 의미)
cursor:n-resize        --> 상단 화살표 (상단으로 크기 변경 의미)
cursor:se-resize      --> 우하단 화살표 (대각우측아래로 크기 변경 의미)
cursor:sw-resize     --> 좌하단 화살표(대각좌측아래로 크기 변경 의미)
cursor:s-resize         --> 하단 화살표 (하단으로 크기 변경 의미)
cursor:w-resize        --> 왼쪽 화살표 (왼쪽으로 크기 변경 의미)
cursor:text                --> 텍스트를 가리킬 때 커서 영문자 I 처럼 생김
cursor:wait               --> 모래시계 혹은 무지개회전판(맥) 등 기다림을 의미하는 커서
cursor:help               --> 물음표 커서 (도움말을 의미)

cursor:ns-resize      --> 상하크기 크기 변경 화살표 커서
cursor:ew-resize      --> 좌우크기 크기 변경 화살표 커서
cursor:nesw-resize   --> 우상좌하대각 크기 변경 화살표 커서
cursor:nwse-resize   --> 좌상우하대각 크기 변경 화살표 커서

참고1 https://jsfiddle.net/u4xcu8ub/

다음은 특정 HTML 엘리먼트 위에 마우스 커서가 올라올 경우 효과를 변경하기 위한 CSS 입니다.

.item:hover {
    font-weight: bold;
}

.item-enlarge:hover {
   font-size: large;
}

위에서 보여주는 것처럼 CSS의 선택자에서 :hover를 붙이게 되면 마우스가 해당 엘리먼트 위에 올라가 있는 동안 적용해야 하는 CSS를 작성할 수 잇습니다. 같은 방식으로 글자, 이미지 등의 크기,색상 등을 변경할 수 있습니다. CSS3의 애니메이션을 적용할 수도 잇습니다.

참고2 https://jsfiddle.net/vs104fcj/1/

보다 복잡한 기능을 원하는 경우는 자바스크립트로 구현해야 합니다. jquery나 prototype 같은 자바스크립트 라이브러리를 이용할 수도 있고, 직접작성하여도 관계없습니다. 다만 onmouseover에 해당하는 이벤트 핸들러를 HTML 엘리먼트에 적용해야 합니다.

참고3 http://htglss.tistory.com/21

참고4 http://www.jquerybyexample.net/2011/02/how-to-zoom-image-on-mouse-over-using.html

  • 2016년 06월 30일에 작성됨
    리눅스(유닉스) 기반의 시스템에서 웹 서비스를 개발하고 있습니다.

  • 답변 감사한데요 마우스 커서가 아니고 웹사이트의 글 목록,이미지,포스트 등 을 말씀드린겁니다. 이걸 반응형 웹이라고 하는지는 잘 모르겠네요    kafka   2016.6.30 13:17     
  • 마우스 포커스에 해당하는 글이나, 이미지 등이 확대되거나, 팝업되는 효과를 말하는건가요?    허대영(Daeyoung Heo)   2016.6.30 14:10     
  • 넵 예를 들어 웹상에 사람들이 글쓴 box형태의 포스트가 있으면요 포스트 에다가 마우스 커서를 갔다대면 뭔가 애니메이션 효과라고 해야하나? 색상이 바뀌던가 약간 확대가 되는 기능들을 말씀드리는겁니다    kafka   2016.6.30 14:19     
  • 답변을 수정했습니다. 특별히 이미지만 다루는 경우에는 오픈소스 자바스크립트 라이브러리를 이용하는 것도 좋습니다.    허대영(Daeyoung Heo)   2016.6.30 14:28     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close