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.6.30 13:17
- 마우스 포커스에 해당하는 글이나, 이미지 등이 확대되거나, 팝업되는 효과를 말하는건가요? 허대영(소프트웨어융합대학) 2016.6.30 14:10
- 넵 예를 들어 웹상에 사람들이 글쓴 box형태의 포스트가 있으면요 포스트 에다가 마우스 커서를 갔다대면 뭔가 애니메이션 효과라고 해야하나? 색상이 바뀌던가 약간 확대가 되는 기능들을 말씀드리는겁니다 알 수 없는 사용자 2016.6.30 14:19
- 답변을 수정했습니다. 특별히 이미지만 다루는 경우에는 오픈소스 자바스크립트 라이브러리를 이용하는 것도 좋습니다. 허대영(소프트웨어융합대학) 2016.6.30 14:28
댓글 입력