IE 不尊重 :hover on element答案

【问题标题】：IE not respecting :hover on elementIE 不尊重 :hover on element
【发布时间】：2012-04-07 05:50:39
【问题描述】：

带有“Read About It”按钮的标头图形有一个带有悬停的定位链接，当鼠标悬停时会显示橙色按钮图形并且是一个可点击的链接。

但是，在 IE 浏览器中它不起作用。

这是受影响的 HTML：

<div id="header">
    <a href="/" title="CET Color"><img src="images/logo.gif" width="147" height="86" alt="CET Color" class="logo"></a>
    <span class="strapline">Affordable Large-format UV Printing Solutions</span>
    <a href="/pressroom_article8" class="read_about_it"></a>    
</div>

这里是引用的 CSS：

#header .read_about_it {
    position: absolute;
    top: 239px;
    left: 803px;
    z-index: 100;
    width: 114px;
    height: 17px;
}
#header .read_about_it:hover {
    background-image: url(/images/masthead_index_read_about_i.jpg);
    background-repeat: no-repeat;
    cursor: pointer;
    z-index: 101;
}

有谁知道为什么悬停在 IE 浏览器中不起作用？

【问题讨论】：

一个原因可能是您有一个空链接。尝试在其中插入一些文本并执行text-indent:-9999px 将其移出。
我认为你是对的，问题涉及链接为空。当我向链接添加内容时，它可以工作。当我将文本缩进添加到上面的第一个声明时，它停止工作。不知道该怎么办...

标签： css internet-explorer hover

【解决方案1】：

如果您使用的是 IE6，它不支持 :hover 在除

之外的任何元素上

<a>

我已经通过使用 javascript 解决了这个问题

onmouseover
onmouseout

事件。

【讨论】：

不正确。 IE 在所有元素上都支持:hover。 IE6 不支持在除<a> 标记之外的任何元素上使用:hover。所有高于 IE6 支持的版本 :hover nicely.

【解决方案2】：

添加“显示：块；”给它，它应该适合你。

#header .read_about_it {
  display: block;
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

【讨论】：

我试过了，但没用。这种模式是特定的 - 标准的还是松散的？

【解决方案3】：

我有一个解决方案。只需为您的 read_about_it 类定义背景颜色或背景图像。

您的 CSS 代码/或 IE 中存在明显的逻辑错误 - 取决于观点。您的 A 标签是空的 - 我不是指文本，而是背景（您在悬停状态下更改背景）。我们都知道 IE 生活在自己的世界中，并以不同的方式处理 HTML，因为它使用古老的 Trident 引擎。但是，如果元素为空（没有背景），IE 不会在悬停状态下更改背景，因为 IE 假定不需要更改或创建不存在的内容。
干杯！

【讨论】：

我可以通过在背景中添加一个透明的 gif 来完成这项工作。非常感谢。
不客气！使用透明 gif 是个好主意。

【解决方案4】：

我有同样的问题，我已经解决了这个问题：

#header .read_about_it {
  display: block;
  background: rgba(255, 255, 255, 0);
  position: absolute;
  top: 239px;
  left: 803px;
  z-index: 100;
  width: 114px;
  height: 17px;
}

“背景：rgba(255, 255, 255, 0)”是解决这个问题的关键字。但是你想要 IE-7 或更早的版本你可以把 background-image: url(URL_TO_TRANSPARENT_IMAGE).

【讨论】：