JQuery hover(over,out) 使用筆記

轉載自：http://www.douban.com/note/202404884/

JQuery hover(over,out) 使用筆記

JavaScript 下.onmouseover() 和 onmouseout()事件給咱們的WEB頁面交互帶來了無數超炫的效果.而在JQuery裏.取而代之的是 hover(over,out)事件.

用法:

$("#id").hover(

function(){

   //當鼠標放上去的時候,程序處理

},

function(){

   //當鼠標離開的時候,程序處理

});

幾句簡單的代碼,客戶端下就是一個超炫的效果.看下效果圖吧.

圖片顏色明顯失真了.但效果基本仍是能看出來的. 上面這張圖片中.個人鼠標正好在第 [主題] 上

當鼠標放到 [編輯] 連接上,就立刻會出現 [主題] [問題] 倆個連接.當鼠標移去.又回到了 [編輯] 連接.

 

但上面的效果但是在一個列表裏每一個 編輯連接都放上這個效果.加入一個列表有1000(確定不可能放這麼多數據)條數據.也就是在1000個鏈接上放這個效果.哈哈.JQuery實現起來就簡單多了.

直接附上代碼:

$(":div[name=div_edit]").each(function() {
               $(this).hover(function() {
                   $(this).find(">div:first-child").hide();
                   $(this).find(">div:last-child").show();
               },
           function() {
               $(this).find(">div:first-child").show();
               $(this).find(">div:last-child").hide();
           });
           });

 

注意:

在JQuery中.也能夠用 mouseover 和mouseout 來實現,可是有個問題.

我在一個 div 裏放了 倆個 div N個鏈接. 當我給最外面的 div 設置上mouseout 事件的時候,也就是說這個div裏面的全部元素都自動繼承了mouseout事件.這下可麻煩了.即便你的鼠標離開了div 裏面的一個鏈接.這個div也會觸發 mouseout 事件,很煩.因此,推薦用hover(over,out) 方法!