Question

我有一个用display：hidden隐藏的div;然后它出现在图标悬停时，基本上是一个工具提示。

除了当我悬停时，工具提示div（相对定位显示在悬停图标旁边）将显示它应该的位置，但也会导致页面打开空间＆＃ 39; div实际位于何处。

所以代码看起来有点像：

    ~included header with menu~
    <div id="page">
      <div id="hidden-tool-tip">Some instructions about whatever</div>
        <div id="para1">
            <p>A bunch of blah blah stuff</p>
        </div>
        <div id="para2">
            <p>A bunch of blah blah stuff</p>
        </div>
        <div id="para3">
            <img src="theInterWebs" id="tool-tip-activator" />
        </div>
    </div>

   <script type="text/javascript">
    $("#tool-tip-activator").mouseenter( function () {
        $("#hidden-tool-tip").fadeIn();
    });

    $("#tool-tip-activator").mouseleave(function () {
        $("#hidden-tool-tip").fadeOut();
    });
   </script>

CSS：

#hidden-tool-tip
{
 position: relative;
 top: 50%;
 left: 300px;
 display: none;
 width: 300px;
}

因此，隐藏的工具提示位于页面顶部的隐藏div中。 mouseenter激活的图像大约是页面的一半，我希望它的旁边出现一个提示。但是当鼠标中心发生时，与工具提示高度相同的空白区域会在页面顶部打开。

如何让空间不开放？

Answer 1

我会在工具提示上使用position : absolute;。将工具提示div放在图标div（您悬停的那个）内，并将其设置为相对。

http://jsfiddle.net/6MmDu/

看看上面的例子。

另外，请看一下本教程以获得更多想法...... http://www.alessioatzeni.com/blog/simple-tooltip-with-jquery-only-text/

相对定位的div占据了原始位置的空间

1 个答案: