jquery 工具提示在悬停时闪烁

Question

我在使用 jQuery 工具提示时遇到问题。工具提示会显示，但它位于“a”标签 html 元素的顶部，并且当工具提示本身悬停时它会闪烁（工具提示是一个图像，显示在 a 标签区域内）。接受其他实现建议，但我不想使用插件。

任何帮助表示赞赏！

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

问题是工具提示显示（必须显示）在 a 元素之上，因此当您浏览工具提示本身时，它会闪烁。

Answer 1

你有很多 CSS 错误，这就是它不起作用的原因。你的 JS 工作得很好。
绝对元素始终相对于相对定位的最接近的父元素：

http://jsfiddle.net/sXSHp/

此外，建议您至少为绝对定位元素提供顶部和左侧位置，以避免出现不需要的结果。

但你可以只使用 css 来做到这一点：
http://jsfiddle.net/sXSHp/1/