-2

此 CSS 适用于 IE8 和更新版本（以及 Chrome），但不适用于 IE7。具体来说，当我将鼠标悬停在 div 上时，工具提示不会出现。我需要为 IE7（和 IE6）更改什么？

.headertooltip, .headertooltip:visited
{
    color: #0077AA;
    float: left;
    height: 40px;
    text-decoration: none;
    width: 20px;
}

.headertooltip div
{
    background-color: black;
    color: #fff;
    left: 50px;
    padding: 5px 10px 5px 40px;
    position: absolute;
    text-decoration: none;
    top: 82px;
    visibility: hidden;
    width: 900px;
    z-index: 10;
}

.headertooltip:hover div
{
    position: absolute;
    visibility: visible;
}

更新：

我已经更新了代码以使用鼠标事件来显示 div/工具提示，但这在 IE7 中仍然不起作用。这让我认为问题在于我的标记/CSS。

我试图在 jsFiddle 中创建一个示例。它不起作用，但你明白了。将鼠标悬停在左侧的小黑框上（我添加它只是为了让您可以看到目标）应该会出现工具提示。

http://jsfiddle.net/szyN4/

4

1 回答 1

1

IE6 对:hover伪类的支持极少，而 IE7 则不完整。

尝试将其更改.headertooltip:hover div为.headertooltip div:hover取悦 IE 冒泡机制的奇怪之处。它可能会解决您的问题（当然，您必须将其包含在 IE7 的条件样式表中）。

你也可以使用 JavaScript 通过实现mouseenter和来回避这个问题mouseleave。请参阅我发布的关于 IE 关于鼠标事件的创新的答案，以供快速参考。

参考

于 2012-07-02T14:11:30.120 回答