jQuery hover()

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

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

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

<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