Question

我有一个绝对定位div，在a的悬停时显示。因为它绝对位于锚点的基础（top:0; left:0），所以我希望让用户从锚点移动到div而不隐藏div 。

实际上，我准备了一段JQuery代码，但我只能让div在悬停时显示。当我从锚点移动到div时，后者被隐藏得很隐蔽。看看JSFiddle看看我做了什么。

提前致谢。

Answer 1

您需要通过链接包装div。这种悬停div的方式也会被识别为悬停在链接上，因为它是父级。

<a>
    Hover Me!
    <div>Hidden Message.</div>
</a>

此任务完全不需要javascript。

等一下我的小提琴。这是：http://jsfiddle.net/xwder/1/

或者，您可以将a和div包装在另一个容器中，这样您就不会在链接中包含子项。查看Alex的答案。

Answer 2

首先，你通过使用javascript使一切变得复杂。在这种情况下，您不需要它，因为您可以使用父容器来处理悬停操作。

我个人会这样做：http://jsfiddle.net/qLUf9/

<div class="hover_container">
    <a class="button">Click Me</a>
    <div class="container">
       This is my hover content.
    </div>
</div>

CSS：

a.button {
 background-color: blue;
 color: #fff;
}

.hover_container {
 position: relative:  
}

.hover_container .container {
 display: none;
 border: 1px solid #000;
 float: left;
 position: absolute;
 left: 0;
 top: 20px;
}

.hover_container:hover .container {
 display: block;
}

请注意： IE6不支持块元素的:hover属性。对于IE6及更低版本，您必须使用一些基本的JavaScript来向该元素添加hovered等类。您可以在此处阅读有关修复IE6悬停错误的更多信息：http://robspangler.com/blog/hover-pseudo-class-bug-fix-for-ie6/

Answer 3

试试这个。我认为它可以做你想要的而不会过多地改变你的代码。：）

Link to fiddle

在悬停和可导航时使绝对定位的div可见

3 个答案: