JQuery hover mouseenter event fired even though I left the div

I have 2 div(s) as defined below:

<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> 

and I add hover event as follows :

$("#feeds p").filter(function(){  
 return ($(this).attr('id') == 'a' || 
                    $(this).attr('id') == 'b' || 
                    $(this).attr('id') == 'c' 
                )})  
.hover(function(e){  
$(this).css('backgrou开发者_高级运维nd-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');  
}):

The issue is that I can still see the link tags in div id='feedsInfo' if I just wave over the lists 'A' 'B' 'C'( The mouse sits somewhere else now.In short it should fire mouseleave event) even though they change color from red to blue and blue to red on mouseenter or mouseleave events.

Kindly explain how can I remove the link tags from div when I just skim through the list and mouse is not hovered over lists 'A' 'B' 'C'

Try this:

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

It would be helpful to know which browser/version and which version of jQuery you are using.

Try $("#feedsInfo").empty(); instead.

If that doesn't work, you might be experiencing a browser quirk specific to your situation. As a work-around, you could try putting a hover event handler on the parent container of the p tags, which would empty the #feedsInfo block. The mouse is normally going to enter the parent node once it leaves the p nodes, so that might work well in your case.