即使我离开了 div，JQuery 悬停 mouseenter 事件也会触发

Question

我有 2 个 div，定义如下：

<div id="feedsInfo"></div>  

<div id="feeds">
<ul>
<li><p id="a">A</p></li>
<li><p id="b">B</p></li>
<li><p id="c">C</p></li>
</ul>
</div> 

我添加悬停事件如下：

$("#feeds p").filter(function(){  
 return ($(this).attr('id') == 'a' || 
                    $(this).attr('id') == 'b' || 
                    $(this).attr('id') == 'c' 
                )})  
.hover(function(e){  
$(this).css('background-color','red');  
 $('#feedsInfo').css('background-color','red');

      << dynamically append <a href> tags to div id='feedsInfo' >>

},function(e){  
$("#feedsInfo").children().remove();    
  $(this).css('background-color','blue');   
  $('#feedsInfo').css('background-color','blue');  
}):

问题是我仍然可以在 div id='feedsInfo' 中看到链接标签，如果我只是在列表“A”“B”“C”上挥手（鼠标现在位于其他地方。简而言之，它应该会触发mouseleave 事件），即使它们在 mouseenter 或 mouseleave 事件中将颜色从红色变为蓝色，从蓝色变为红色。

请解释一下当我只是浏览列表并且鼠标没有悬停在列表'A''B''C'上时如何从div中删除链接标签

Answer 1

试试这个：

$("#feedsInfo").html('');

Answer 2

了解您使用的是哪个浏览器/版本以及 jQuery 的哪个版本会很有帮助。

改用$("#feedsInfo").empty();。

如果这不起作用，您可能会遇到特定于您的情况的浏览器怪癖。作为一种变通方法，您可以尝试将hover 事件处理程序放在p 标记的父容器上，这将清空#feedsInfo 块。一旦鼠标离开p 节点，鼠标通常会进入父节点，因此这可能适用于您的情况。