jquery工具提示在悬停上闪烁

我在使用jQuery工具提示时遇到问题。工具提示显示出来，但是它位于“a”标签html元素的顶部，当工具提示本身被徘徊时，它会闪烁（工具提示是图像并显示在标签区域内）。打开其他实施建议，但我不想使用插件。jquery工具提示在悬停上闪烁

任何帮助表示赞赏！

的JS：

$("#myContainer li a").hover(
     function() 
     { 
      var tip = $(this).attr("title"); 
      $(this).attr("title", ""); 
      $(this).before("<div id='tooltip'>" + tip + "</a>"); 
      $("#tooltip").fadeIn("slow"); 
     }, 
     function() 
     { 
      $(this).attr("title", $("#tooltip").html()); 
      $("#myContainer li").children("div#tooltip").remove(); 
     } 
    );

的HTML：

<div id="myContainer"> 
    <li> 
     <a href="mylink.html" title="get started">Hello</a> 
    </li> 
    <li> 
     <a href="myotherlink.html" title="get started">Hello Again!</a> 
    </li> 
</div>

的CSS：

#myContainer li 
{ 
    background-color:#ffffff; 
    float: left; 
    list-style:none; 
    margin: 12px 0; 
    padding: 0;  
    width: 240px; 
    overflow:hidden; 
} 
#myContainer li a 
{ 
    width:100%; 
    height:100%; 
    display:block; 
    border:1px solid blue; 
} 
#tooltip 
{ 
    background-image:url(tooltip_background.png); 
    background-repeat:no-repeat; 
    background-position:52% center; 
    display:block; 
    position:absolute; 
    z-index:9999; 
    height:99px; 
    width:240px; 
    padding:0; 
    margin:-40px 0 0; 
    text-indent:-9999px; 
}

的问题是，工具提示显示出来（有显示）之上的一个元素，所以当你浏览工具提示本身时，它会闪烁。

来源

2011-08-25 IntricatePixels