jQuery hover() Method

 

The hover() method specifies two functions to run when the mouse pointer hovers over the selected elements.
This method triggers both the mouseenter and mouseleave events.

(hover() 메서드는 마우스 포인터가 선택한 요소 위에 있을 때 실행할 두 가지 함수를 지정합니다.
이 메서드는 mouseenter 및 mouseleave 이벤트를 모두 트리거 합니다.)

 

 

html

<ul>
	<li>jQuery hover() Methodt</li>
	<li>jQuery hover() Methodt</li>
	<li>jQuery hover() Methodt</li>
	<li>jQuery hover() Methodt</li>
	<li>jQuery hover() Methodt</li>
</ul>

 

css

ul {
	padding:0;
	margin:0;
	list-style:none;
}
li {
	height:40px;
	line-height:40px;
	border:1px solid #ddd;
	border-top:0;
	text-align:center;
}
li:first-child {
	border-top:1px solid #ddd;
}
.hover {
	background-color:#f1f1f1;
}

 

jquery

$("li").hover(function() {
	$(this).addClass("hover");
}, function() {
	$("li").removeClass("hover");
});