jquery之鼠標滑過圖片mousemove事件

 須要解決的問題：鼠標停在圖片上面的時候的 如今這個張圖片的相關信息，

 個人第一個感受是使用鼠標事件：mousemove 當他/她停留在圖片上面都 時候就能夠觸發相應顯示的事件， mouseout離開的時候觸發隱藏事件

 

可是在實際的完成中發現：鼠標停留在圖片上 信息會不停的抖動，查閱相關資料發現，手冊對mouseover事件的解釋是：

注意：用戶把鼠標移動一個像素，就會發生一次 mousemove 事件。處理全部 mousemove 事件會耗費系統資源。請謹慎使用該事件。

 也就是說：咱們鼠標是即便有一個像素的抖動都會觸發顯示事件 ， 難怪會形成圖片信息的資源

 

解決的辦法是：使用hover，官方手冊對這個方法的解釋：

 

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

當鼠標移動到一個匹配的元素上面時，會觸發指定的第一個函數。當鼠標移出這個元素時，會觸發指定的第二個函數。並且，會伴隨着對鼠標是否仍然處在特定元素中的檢測（例如，處在div中的圖像），若是是，則會繼續保持「懸停」狀態，而不觸發移出事件（修正了使用mouseout事件的一個常見錯誤）。

 

實例代碼：

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