마우스 포인터가 특정 요소에 올라갔을 때 또는 떠났을때 나타나는 이벤트 메소드 중 하나인 hover()에 대해 알아보겠습니다.

 

javascript에서의 mouseenter, mouseleave의 기능을 하고있다고 볼 수 있으며, 저 둘의 기능을 hover메소드에 담아 각각 호출하지 않아도 된다는 특징이 있습니다.

 

hover 예제를 통하여 알아보겠습니다.

 

1.

<script>
	$(document).ready(function() {
		$("#htest").hover(function() {
			$(this).css("background-color", "orange") 
		}, function() {
			$(this).css("background-color", "aqua")
		});
	});
</script>
<body>
    <h1 id="htest">hi</h1>
</body>

hover()는 마우스를 올렸을때와 내렸을 때의 기능을 구현할 수 있기 때문에 처음 함수에서는 마우스를 올렸을때의 기능을, 그 뒤의 함수에서는 마우스를 떠났을때를 나타냅니다.

 

출력결과↓

마우스에 영역을 올리지 않았을 때

마우스를 올렸을 때

마우스가 영역을 떠났을 때

아무동작도 하지 않았을 때 하얀배경에 검정색글씨(기본값)입니다.

마우스를 해당 영역에 올려놓았을때 주황색으로 배경색으로 바뀌었고 마지막에 나올때는 하늘색으로 처리가 됩니다.

 

'코딩 > jQuery' 카테고리의 다른 글

jQuery fadeIn, fadeOut, fadeToggle  (0) 2020.07.01
jQuery setInterval, clearInterval  (0) 2020.06.30
JavaScript 실행순서  (0) 2020.06.30
jQuery this란?  (0) 2020.06.27
jQuery 선택자(Selector)- id, class  (0) 2020.06.26
  • 네이버 블러그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 카카오스토리 공유하기