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

Posted

技术标签:

【中文标题】: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 功能,您需要使用 javascriptonmouseover/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 不是每个元素都支持的,例如它适用于&lt;a&gt;,但在&lt;div&gt; afaik 上中断

【讨论】:

以上是关于:hover CSS 的伪类在 IE7 中不起作用的主要内容,如果未能解决你的问题,请参考以下文章

css鼠标悬停伪类

具有内联样式的 CSS 伪类

CSS背景大小在IE7 / 8中不起作用[重复]

css伪类选择器都有哪些

之前和之后的伪元素在顺风 CSS 中不起作用

自定义 CSS 类在 WordPress 中不起作用