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/