如果父元素也有鼠标悬停，如何为子元素设置鼠标悬停事件？

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(); 
});