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

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

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

    • 답변 감사한데요 마우스 커서가 아니고 웹사이트의 글 목록,이미지,포스트 등 을 말씀드린겁니다. 이걸 반응형 웹이라고 하는지는 잘 모르겠네요 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

ᕕ( ᐛ )ᕗ
로그인이 필요합니다

작성한 답변에 다른 개발자들이 댓글을 작성하거나 댓글에 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.