JQuery mouseover / mouseout Event

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을 이용해서 간단한 예제를 만들어 봤습니다. 수고하셨어요.