jquery hover使用方法介紹-js教程-PHP中文網

jquery hover使用方法介紹

黄舟

發布： 2017-06-26 11:05:09

原創

3845 人瀏覽過

概述

一個模仿懸停事件（滑鼠移動到一個物件上面及移出這個物件）的方法。這是一個自訂的方法，它為頻繁使用的任務提供了一種「保持在其中」的狀態。

當滑鼠移到一個符合的元素上面時，會觸發指定的第一個函數。當滑鼠移出這個元素時，會觸發指定的第二個函數。而且，會伴隨著滑鼠是否仍處在特定元素中的偵測（例如，處在div中的影像），如果是，則會繼續保持「懸停」狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

參數

over,outFunction,FunctionV1.0

over:滑鼠移到元素上要觸發的函數

out:滑鼠移出元素要觸發的函數

outObjectV1.4

當滑鼠移到元素上或移出元素時觸發執行的事件函數

範例

over,out 描述:

滑鼠懸停的表格加上特定的類別

jQuery 程式碼:

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

登入後複製

out 描述:

hovre()方法透過綁定變數"handlerInOut"來切換方法。

jQuery 程式碼:

$("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是不是只寫hover ,寫別的就不用，是不是這樣的

先回答是，不是必須是hover。

這個addClass裡寫hover是因為之前的CSS類別選擇器的名稱是hover（就是.hover {background:red};）。這個名稱可以改成別的。下邊給你一個可以工作的程式碼：

<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中文網其他相關文章！