javascript - div-tooltip - 在 stackoverflow 上相同

Question

如果我在首页的 stackoverflow 中将鼠标悬停在我的昵称上，会显示带有 * 事件的新菜单 * 特权 * 注销等。我该怎么做？我做了一些东西:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

<style type="text/css">

#ONE {
    background-color: #888;
    width: 500px;
    height: 500px;
}
#TWO {
    background-color: blue;
    width: 50px;
    height: 50px;
}
#THREE {
    background-color: yellow;
    width: 200px;
    height: 200px;
    display: none;
}
#four {
    background-color: red;
    width: 200px;
    height: 200px;
}

</style>
<script type="text/javascript">

    $(document).ready(
    function()
    {
        $("#TWO").click(
        function()
        {
            $("#THREE").toggle();
        });
    });
</script>

<div id="ONE">
    <div id="TWO">
    </div>

    <div id="four">
    </div>

    <div id="THREE">
    </div>
</div>

示例图片:http://img231.imageshack.us/img231/3885/threej.png

1. 默认
2. 点击蓝色div
3. 我该怎么做？

Answer 1

如果我没理解错的话，你是在问如何让黄色的 div 出现在蓝色的旁边，就像你在第三个模型中那样？如果是这样，那么:

您需要继续阅读 CSS Positioning .简而言之，要让黄色的 div 像那样覆盖所有内容，它需要采用 position: absolute; 它将相对于最近的祖先进行定位定位，因此将 #ONE 设置为 position: relative;

所以:

#ONE {
  position: relative;
}
#THREE {
  position: absolute;
  left: 100%;
  top: 25%;
}

这将使 #THREE 的左上角移动到 #ONE 的最右边和向下四分之一的位置。绝对定位也将它从文档流中移除，允许它与其他元素重叠。