1

我有一个绝对定位div，显示在a. 由于它绝对位于锚点（top:0; left:0）的底部，我希望让用户从锚点移动到 div 而不隐藏 div。

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

提前致谢。

4

3 回答 3

2

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

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

您根本不需要 javascript 来完成这项任务。

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

或者，您可以用另一个容器包装 thea和 the divboth，这样您就不会在链接中包含子项。看看亚历克斯的答案。

于 2012-09-24T19:00:41.430 回答
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/

于 2012-09-24T19:13:00.420 回答
0

试试这个。我认为它可以满足您的需求，而不会过多地更改您的代码。:)

链接到小提琴

于 2012-09-24T19:10:02.253 回答