的MouseEnter /鼠標離開的面積

Question

嘿我有一個小問題。我做對的區域的mouseenter和鼠標離開：已經解決了

50％：

$("area.anyClass").on('mouseenter',function(){ 
    $(this).addClass('hovered'); // works! 
}); 

$("area.hovered").on('mouseleave',function(){ 
    $(this).removeClass('hovered'); // does not work! 
}); 

所以第一部分完美的作品，當我將鼠標懸停與class="anyClass"拋出一個區域，這個區域獲得一個新的class="anyClass hovered" 。

當我離開鼠標兩類停留在這個區域，爲什麼呢？

問候！

Answer 1

這是因爲您要附加的事件監聽器一次 - 運行代碼時（假設這是$(document).ready(等）。沒有任何元素匹配選擇器area.hovered，所以沒有事件偵聽器。相反，使用事件委派：

$("area").on('mouseleave', '.hovered', function(){ 
    $(this).removeClass('hovered'); 
}); 

設置第二個參數的選擇意味着它會添加監聽器匹配area和所有元素，然後在mouseleave事件，檢查它們是否也匹配.hovered，調用函數如果他們這樣做。

jQuery docs on .on