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');  
}):

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

请详细解释当我浏览列表并且鼠标没有悬停在列表'A'''B''C'

上时，如何从div中删除链接标记

Answer 1

试试这个：

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

Answer 2

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

请尝试$("#feedsInfo").empty();。

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

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

2 个答案: