:hover CSS 的伪类在 IE7 中不起作用

Posted 2023-03-06

【中文标题】:hover CSS 的伪类在 IE7 中不起作用

【英文标题】：:hover pseudo-class of CSS does not work in IE7

【发布时间】：2011-01-05 20:26:44

【问题描述】：

我对 CSS 的 :hover 伪类有疑问。

我使用它就像

tr.lightRow:hover 
    color:red
 

它在 Safari 和 Firefox 中有效，但在 IE7 中无效。请帮帮我。

【问题讨论】：

你可能想发布一些示例代码

你在申请:hover什么？

:hover 是伪类而不是属性。

【参考方案1】：

IE7 支持 :hover，至少在标准模式下是这样。它可能不在怪癖模式下。

【讨论】：

如何激活标准模式

在您的文档中添加严格的 !DOCTYPE 以启用完整的 IE7 功能

【参考方案2】：

IE 有不良 CSS 支持的历史。最初只支持a 标签:hover。而且你不能有类似a:hover span 的东西来表明只有span 标签在悬停父a 时应该改变。

如果您想在所有 IE 版本中正确使用 :hover 功能，您需要使用 javascript 和 onmouseover/onmouseout。

如果您使用 xhtml doctype 来启用标准模式，也会有所帮助。

【参考方案3】：

IE 6 仅支持链接上的 :hover 伪类，但 IE 7 支持大多数元素。

正如大卫所说，它可能无法在怪癖模式下工作。原因可能是 IE 在 quirks 模式下大多恢复到更接近 IE 4 的东西，允许许多 IE 特定功能并删除一些符合标准的功能。

如果您想要块元素上的:hover 功能并支持回到 IE 6，您可以使用链接元素并使用 CSS 使其成为块元素。请注意，链接只能包含内联元素（例如，没有 divs），因此如果您想要链接内的块元素，您还必须使用 CSS 进行设置：

CSS：

.hoverlink  display: block; 
.hoverlink:hover  background: #eee; 
.hoverlink .item  display: block; 

HTML：

<a href="..." class="hoverlink">
  <span class="item">Line 1</span>
  <span class="item">Line 2</span>
  <span class="item">Line 3</span>
</a>

（您可能还需要考虑使用该技术对搜索引擎的影响。如果链接仅包含描述其链接内容的文本，则链接具有更好的影响。）

【参考方案4】：

我遇到过几次 - 请查看以下链接..

http://www.bernzilla.com/item.php?id=762

“如果你想在所有元素上支持 :hover 而不仅仅是 标签，请确保你使用的是严格的 DOCTYPE，这样 IE7 就不会进入怪癖模式。”

【参考方案5】：

:hover 不是每个元素都支持的，例如它适用于<a>，但在<div> afaik 上中断