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