JQuery OnHover 介紹

JQuery OnHover 是 JQuery 中的一個事件，當鼠標懸浮在某個元素上時，就會觸發該事件。 Jquery OnHover 可以用來實現多種效果，如提示信息、圖片切換、下拉菜單等等。

//JQuery OnHover 實現提示信息效果
$(document).ready(function(){
$(".tooltip").hover(function(){
$(this).children(".tip").fadeIn(200);
}, function(){
$(this).children(".tip").fadeOut(200);
});
});

如上代碼所示，當鼠標懸浮在 class 為 tooltip 的元素上時，會觸發 hover 事件。在該事件處理函數里，首先查找元素的子元素中 class 為 tip 的元素，然后使用 fadeIn() 方法將其顯示出來。當鼠標移開元素時，再使用 fadeOut() 方法將其隱藏起來。

//JQuery OnHover 實現圖片切換效果
$(document).ready(function(){
$(".img-change").hover(function(){
$(this).attr("src", "image/hover.png");
}, function(){
$(this).attr("src", "image/default.png");
});
});

另外一個常用的效果是圖片切換。如上代碼所示，當鼠標懸浮在 class 為 img-change 的圖片上時，會觸發 hover 事件。在該事件處理函數里，使用 attr() 方法修改圖片的 src 屬性，實現圖片的切換效果。

JQuery OnHover 可以按照不同的需求和場景進行靈活運用，提高網頁的用戶體驗。