悬停效果不适用于 IE8答案

【问题标题】：Hover effects not working with IE8悬停效果不适用于 IE8
【发布时间】：2011-09-10 07:42:26
【问题描述】：

我使用 CSS 来改变表格悬停时的颜色

#tabb tbody tr:hover td{
    color:#006;
    background:#d0e4f2;
}

这在 Chrome 和 Firefox 中运行良好，但在 Internet Explorer 8 中不会出现悬停效果。

有没有办法让这个效果也适用于 IE8？

【问题讨论】：

在 IE8 中工作得非常好。验证您的 html 代码。
@AR：在@thirtydot 的帮助下找到了问题 - 缺少 DOCTYPE。

标签： html css internet-explorer-8 hover doctype

【解决方案1】：

应该在 IE8 中可以正常工作。

暗中刺伤：

确保您将a doctype 作为触发标准模式的 HTML 的第一行，例如：

<!DOCTYPE html>

在Quirks Mode 中，IE 模拟 5.5 版，该版本不支持在 a 以外的元素上使用 :hover。

【讨论】：

我没有那行。现在它起作用了！谢谢，我会阅读有关 doctype 的信息，不知道。
我在我的 jsp 中有我的 doctype，但后来把东西拿出来解决其他问题。你成功了！感谢您的帮助！

【解决方案2】：

IE8 不是:hover 问题的常见罪魁祸首。如果你不能让它工作，总有 jQuery！

$("#tabb tbody tr").hover(
    function() {
        $("this").children("td").css( { 'background-color': '#d0e4f2', 'color': '#006' } );
    },
    function() {
        $("this").children("td").css( { ... } );
    }
);

【讨论】：

不是一个糟糕的选择，但不应该是必要的，而且在非常大的表上，会有一些性能问题。
如果您决定采用 jQuery 路线，您还可以在 CSS 中创建一个 .highlight 类，然后使用 jQuery 的 toggleClass() 函数，而不是将 CSS 属性硬编码到您的语句中。如果您愿意将额外的代码添加到 CSS IMO，这是一个更好的解决方案。
@Patricia - 关于性能的好点。太多人在不必要的情况下依赖 javascript 而没有考虑后果。

【解决方案3】：

我的猜测是您的表格的 html 代码中存在一些问题。正如你在这个又快又脏的小提琴上看到的，你的 CSS 没问题：

http://jsfiddle.net/PwZsN/

【讨论】：