다루두루

블로그 이미지

차케요

공부하면서 정리하는 노트같은 블로그입니다.

JQuery mouseover / mouseout Event

HTML 공부 2015. 3. 17. 21:17

JQuery mouseover / mouseout Event


■ JQuery 이벤트 중에서 마우스를 특정 요소 위에 올렸을 때 발생하는 이벤트가 mousetover인데요. 보통 mouseout과 mouseleave 이벤트와 함께 사용합니다. 이 두 이벤트의 차이는 mouseout은 요소 안에 있는 다른 요소를 선택하게 되면 마우스가 요소를 빠져나간 것으로 인식하는 반면 mouseleave는 나간 것으로 인식하지 않는다는 차이점이 있습니다. 상황에 맞는 이벤트를 이용하시면 되구요. 여기서는 mouseout과 짝을 이루어서 예제를 만들면서 이벤트를 연결해보겠습니다. 


■ 예제의 내용은 특정 글자 위에 마우스를 올려놓았을 때 글자의 두께(bold)와 색(color)를 바꿨다가 마우스가 글자를 떠나게 되면 원래대로 돌아가게 하는 예제입니다. (CSS의 hover 기능과 같다고 생각하시면 됩니다.)

 

 


■ 본문에 간단한 문자열을 입력하고 span 태그로 묶은 부분에 마우스를 올리면 글자색과 두께가 바뀌도록 하겠습니다.


■ 첫 번째 이벤트(mouseover)의 내용은 span 태그 부분에 마우스가 올라가면 css 메서드를 이용해서 글자색은 빨간색으로 두께는 bold로 바뀌도록 하고 있으며, 두 번째 이벤트 (mouseout)는 마우스가 요소를 빠져나가면 글자색을 검은색, 두께는 normal로 바꾸도록 하고 있습니다. 브라우저에서 마우스를 올려서 이벤트를 실행해보겠습니다.


■ span 태그가 지정되어 있는 "이 부분에" 마우스를 올려보겠습니다. 


■ 그림과 같이 글자의 두께와 bold로 바뀌고, 글자색은 빨간색으로 바뀌게 됩니다. 현재 마우스가 올라가 있는 상태이구요. 마우스가 다른 곳으로 나가면 원래 글자로 돌아가게 됩니다. 


이렇게 해서 JQuery 이벤트 중에서 mouseover와 mouseout을 이용해서 간단한 예제를 만들어 봤습니다. 수고하셨어요.

저작자표시 비영리 변경금지 (새창열림)
Posted by 차케요

    최근...

  • 포스트
  • 댓글
  • 트랙백
  • 더 보기

카테고리

NEW (900)
아이폰 개발 기초 (7)
취미 (16)
아두이노 (16)
[안드로이드] 어플만들기 (77)
안드로이드 기초 다지기 (61)
슈팅게임 만들기 (4)
[JAVA]자바 공부하기 (48)
C언어 알고리즘 (61)
[Unity3D]유니티3D 강좌 (7)
컴퓨터 (325)
포토샵CS2 강좌 (6)
유용한 프로그램 (244)
리눅스 노트정리 (22)
임베디드 리눅스 (11)
New블로그 (9)
음식의 효능 (4)
일반상식 (56)
HTML 공부 (40)
포토샵 공부 (36)
엑셀 (6)
파워포인트 공부 (19)
노트정리 (38)
일상 (33)
TV영화 (85)
방명록 : 관리자 : 글쓰기
차케요's Blog is powered by daumkakao
Skin info material T Mark3 by 뭐하라
favicon

다루두루

공부하면서 정리하는 노트같은 블로그입니다.

  • 태그
  • 링크 추가
  • 방명록

관리자 메뉴

  • 관리자 모드
  • 글쓰기
  • NEW (900)
    • 아이폰 개발 기초 (7)
    • 취미 (16)
      • 아두이노 (16)
    • [안드로이드] 어플만들기 (77)
      • 안드로이드 기초 다지기 (61)
      • 슈팅게임 만들기 (4)
    • [JAVA]자바 공부하기 (48)
    • C언어 알고리즘 (61)
    • [Unity3D]유니티3D 강좌 (7)
    • 컴퓨터 (325)
      • 포토샵CS2 강좌 (6)
      • 유용한 프로그램 (244)
    • 리눅스 노트정리 (22)
      • 임베디드 리눅스 (11)
    • New블로그 (9)
    • 음식의 효능 (4)
    • 일반상식 (56)
    • HTML 공부 (40)
    • 포토샵 공부 (36)
    • 엑셀 (6)
    • 파워포인트 공부 (19)
    • 노트정리 (38)
    • 일상 (33)
    • TV영화 (85)

카테고리

PC화면 보기 티스토리 Daum

티스토리툴바