Jquery hover 사용법 소개
- 黄舟원래의
- 2017-06-26 11:05:093805검색
개요
호버 이벤트(마우스가 개체 위 또는 개체 밖으로 이동)를 시뮬레이션하는 방법입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.
일치하는 요소 위로 마우스를 이동하면 지정된 첫 번째 기능이 실행됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다. 또한 마우스가 여전히 특정 요소(예: div의 이미지)에 있는지 여부가 감지되면 이동 이벤트를 트리거하지 않고 계속 "호버" 상태를 유지합니다. (이벤트에 대한 일반적인 실수의 mouseout 사용을 수정했습니다.)
Parameters
over, outFunction, FunctionV1.0
over: 마우스가 요소 위로 이동할 때 트리거되는 함수
out: 마우스가 요소 밖으로 이동할 때 트리거되는 함수
outObjectV1.4
요소 위로 마우스를 이동할 때 또는 요소가 밖으로 이동할 때 트리거되는 이벤트 함수
Example
over,out 설명:
Mouseover 테이블및 특정 클래스
jQueryCode:
$("td").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );out 설명 :$("td").bind("mouseenter mouseleave",handlerInOut);
$("td").hover(handlerInOut);$("td").hover(
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
}
);
<style type="text/css">
.hover {background:red};
</style>여기의 addClass("hover") 및 RemoveClass("hover")에서 괄호 안의 호버는 단지 호버일 뿐이고 다른 것은 필요하지 않습니다. 그렇습니까?첫 번째 대답은 다음과 같습니다. , 호버일 필요는 없습니다. Hover는 이전 CSS 클래스 선택기의 이름이 hover(즉.hover {배경:red};)이기 때문에 이 addClass에 작성됩니다. 이 이름은 다른 이름으로 변경할 수 있습니다. 다음은 작동하는 코드입니다:
<html>
<head>
<title>hover demo</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<style>
.myStyle {
background: red
}
;
</style>
</head>
<body>
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
<script>
$("td").hover(function() {
$(this).addClass("myStyle");
}, function() {
$(this).removeClass("myStyle");
});
</script>
</body>
</html>위 내용은 Jquery hover 사용법 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.