概述
一個模仿懸停事件(滑鼠移動到一個物件上面及移出這個物件)的方法。這是一個自訂的方法,它為頻繁使用的任務提供了一種「保持在其中」的狀態。
當滑鼠移到一個符合的元素上面時,會觸發指定的第一個函數。當滑鼠移出這個元素時,會觸發指定的第二個函數。而且,會伴隨著滑鼠是否仍處在特定元素中的偵測(例如,處在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中文網其他相關文章!