CSS的:hover伪类在IE7中无法使用

Question

5

我有一个关于CSS中的:hover伪类的问题。

我正在像这样使用它：

tr.lightRow:hover {
    color:red
}

这个在Safari和Firefox中可以正常工作，但是在IE7中无法工作。请帮帮我。

- Tushar Ahirrao

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

你要将:hover应用到什么上？ - Sampson

:hover 是一个伪类而不是属性。 - Gumbo

5个回答

4

IE在CSS支持方面的历史很糟糕。最初只有标签支持:hover伪类。而且你也不能这样用，表示只有父级被悬停时才更改标签。如果你希望在所有IE版本中实现正确的:hover功能，则需要使用javascript和onmouseover/onmouseout事件。

如果你使用xhtml doctype，则可以启用标准模式，这对于CSS布局也会有所帮助。

- Tor Valamo

3

IE 6只支持在链接上使用:hover伪类，但是IE 7支持在大多数元素上使用。

正如David所提到的，它可能不适用于怪异模式。原因是IE在怪异模式下大多回归到接近IE 4的状态，允许许多IE特定功能并删除几个符合标准的功能。

如果您想在块级元素上使用:hover功能并支持IE 6及更早版本，则可以使用链接元素，并使用CSS将其设置为块级元素。请注意，链接仅能包含内联元素（例如没有div），因此如果您想在链接中放置块级元素，则也必须使用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>

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

- Guffa

0

并非所有元素都支持:hover，例如它适用于<a>但在<div>上会出现问题，据我所知。

- antpaw

0

我遇到过这种情况 - 可以看一下以下链接...

- zack

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Quentin · Accepted Answer

IE7在标准模式下支持:hover，但在怪异模式下可能不支持。