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

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

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

链接到小提琴