jQuery的hover()方法用于在鼠標懸停在一個或多個元素上時觸發事件。
使用方法如下:
$(selector).hover(handlerIn, handlerOut);
其中,selector是要綁定事件的元素選擇器,handlerIn是鼠標進入元素時要觸發的函數,handlerOut是鼠標離開元素時要觸發的函數。
$(selector).hover(handler);
這種情況下,handler函數將在鼠標進入和離開元素時都會觸發。
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
這種方式與hover()方法的第一種方式效果相同。
示例:
// 當鼠標進入元素時,改變元素的背景顏色
$(".box").hover(function() {
$(this).css("background-color", "red");
}, function() {
$(this).css("background-color", "blue");
});
// 鼠標進入和離開元素時,顯示和隱藏一個提示框
$(".tooltip").hover(function() {
$(this).find(".tooltip-text").show();
}, function() {
$(this).find(".tooltip-text").hide();
});
以上示例中,當鼠標進入.box元素時,將其背景顏色改為紅色,當鼠標離開時,將其背景顏色改為藍色。當鼠標進入.tooltip元素時,顯示.tooltip-text元素,當鼠標離開時,隱藏.tooltip-text元素。