如果父元素也有鼠標懸停，如何爲子元素設置鼠標懸停事件？

Question

我的頁面上有一個「幫助」區域，每當用戶將鼠標懸停在表格上時，幫助信息都應該更新。問題出在表格中，我在每行的1個單元格中有一個複選框，當用戶將鼠標懸停在該複選框上時，我希望複選框的mouseover事件覆蓋表事件並顯示覆選框幫助。目前，表格鼠標懸停工作正常，但是當我將鼠標懸停在複選框上時沒有任何反應。

<table class="myTable"> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td><input class="myCheckbox" type="checkbox" /></td> 
     <td>Cell 3</td> 
    </tr> 
</table> 

<div class="myHelpMenu"></div> 


$('.myCheckbox').mouseover(function() { 
    $('.myHelpMenu').html("this is my checkbox help"); 
}); 

$('.myTable').mouseover(function() { 
    $('.myHelpMenu').html("this is my tables help"); 
}); 

Answer 1

LIVE DEMO

這是使用mouseover是徘徊在當前target元，比用純JS來檢索，檢測一個很好的方式.tagName您可以創建一個消息列表對象並檢索所需的一個。

$('.myTable').mouseover(function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

}); 

---

如果你想清楚你的信息的消息不喜歡：

$('.myTable').on('mouseover mouseleave',function(e) { 

    var tag = e.target.tagName; 

    var messages = { 
    "INPUT" : "this is my checkbox help", 
    "TABLE" : "this is my tables help" 
    }; 

    $('.myHelpMenu').text(messages[tag]); 

    if(e.type=='mouseleave') 
    $('.myHelpMenu').empty(); 

}); 

Answer 2

由於mouseover該表是整個區域，只需撥打mouseenter代替。然後，您可以在離開表格後添加mouseout以重新更新。

Answer 3

聽起來就像你希望鼠標懸停的複選框停止傳播到表？

如果是這樣，這應該做到這一點。

$('.myCheckbox').mouseover(function(e) { 
    $('.myHelpMenu').html("this is my checkbox help"); 
    e.stopPropagation(); 
});