Jquery hover 사용법 소개-JS 튜토리얼-php.cn

Jquery hover 사용법 소개

黄舟

풀어 주다： 2017-06-26 11:05:09

원래의

3800명이 탐색했습니다.

개요

호버 이벤트(마우스가 개체 위 또는 개체 밖으로 이동)를 시뮬레이션하는 방법입니다. 이는 자주 사용되는 작업에 대해 "유지" 상태를 제공하는 사용자 정의 방법입니다.

일치하는 요소 위로 마우스를 이동하면 지정된 첫 번째 기능이 실행됩니다. 마우스가 이 요소 밖으로 이동하면 지정된 두 번째 기능이 트리거됩니다. 또한 마우스가 여전히 특정 요소(예: 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 설명 :

hovre( ) 메서드는 "handlerInOut" 변수를 바인딩하여 메서드를 전환합니다.

j쿼리 코드:

$("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 중국어 웹사이트의 기타 관련 기사를 참조하세요!