Question

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

任何帮助表示赞赏！

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

问题是工具提示显示（必须显示）在元素的顶部，所以当你翻阅工具提示本身时，它就会闪烁。

Answer 1

你有很多CSS错误，这就是为什么它不起作用。你的JS工作正常。绝对元素始终相对于相对定位的最近父元素：

http://jsfiddle.net/sXSHp/

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

但你只能用css做到这一点： http://jsfiddle.net/sXSHp/1/

jquery Tooltip在悬停时闪烁

1 个答案: