【问题标题】: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/

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-06-17
    • 2013-09-04
    • 2016-06-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2010-12-04
    • 2016-10-05
    相关资源
    最近更新 更多