JQuery hover mouseenter事件被触发，即使我离开了div

Question

我有两个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');  
}):

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

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

Answer 1

试试这个：

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

Answer 2

了解您使用的浏览器/版本和jQuery的版本会很有帮助。

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

如果这不起作用，你可能会遇到特定于你情况的浏览器怪癖。作为解决方案，您可以尝试在p标记的父容器上放置一个hover事件处理程序，这将清空#feedsInfo块。鼠标离开p节点后，通常会进入父节点，因此在您的情况下可能会很好地工作。