悬停时更改表格行的背景颜色答案

【问题标题】：Changing background color of table row on hover悬停时更改表格行的背景颜色
【发布时间】：2014-07-22 07:17:26
【问题描述】：

这是我在这里的第一篇文章，如果我的帖子有点混乱，请见谅。

我正在处理一项使用 HTML5、CSS 和 Javascript 的作业。每当用户将鼠标悬停在该行上时，我都在尝试使用 javascript 来更改表格行背景的颜色。但是，我遇到了两个问题。

这是包含整个代码的 JSFiddle 的链接：

第一个问题似乎与这段代码有关。此代码交替行颜色。删除后，表格行的背景颜色会随着我将鼠标悬停在一行上而发生变化。但是，如果我在 javascript 文件中包含此代码，则行背景颜色不会改变。

var tblrows = document.getElementsByTagName('tr');

for(i=0;i<tblrows.length;i++){
    if(i%2==0) tblrows[i].style.backgroundColor = '#0000FF';
    else tblrows[i].style.backgroundColor = '#C0C0C0';

其次，虽然代码在 JSFiddle 上运行，但运行时它似乎无法在我的网络浏览器中运行，即使上面的代码已从 javascript 文件中删除。

编辑

这是负责在悬停时更改表格行背景颜色的 Javascript 代码

$(document).ready(function(){
    $("table.stripe_table tr:odd").addClass("alternate");

    $("table.stripe_table tr").mouseover(function(){
        $(this).addClass("tr_onmouseover");
    });
    $("table.stripe_table tr").mouseout(function(){
        $(this).removeClass("tr_onmouseover");
    });
    $("table.stripe_table tr").click(function(){
        $(this).toggleClass("tr_onmouseclick");
    });
});

以及我与上述 javascript 代码结合使用的 CSS 代码

table.stripe_table tr.alternate{
    background-color: #CCC;
}
table.stripe_table tr.tr_onmouseover{
    background-color: #FC0
}
table.stripe_table tr.tr_onmouseclick{
    background-color: #F00;
}

【问题讨论】：

是否需要使用 Javascript 更改悬停时的背景颜色？因为这一切都可以在 CSS 中完成。
您的问题是硬编码样式总是优先于类样式。
该代码实际上正在运行——我想你的类被添加和删除就好了。只是当有硬编码的颜色时，应用颜色的类什么都不做。
浏览器控制台在您的计算机上显示了什么？
这就是你需要知道的：developer.mozilla.org/en-US/docs/Web/CSS/Specificity

标签： javascript jquery css html

【解决方案1】：

这里的问题是 CSS 的特殊性。向 TR 添加一个类将取消样式表中的 CSS。不要直接应用颜色，而是添加一个类（偶数/奇数）。

哎呀，你甚至不需要一个类，简单的 css 规则就可以做斑马条纹。

tbody tr:nth-child(odd) {
   background-color: #C0C0C0;
}

你说你需要 JavaScript 来实现悬停，实际上你需要它来支持旧的 IE。现代浏览器可以在没有 JavaScript 的情况下做到这一点

table.stripe_table tr:hover{
    background-color: #FC0
}

您需要做的只是添加一个用于单击行的类

table.stripe_table tr.selected{
    background-color: #F00
}

和 JavaScript

$(document).on("click","tbody tr", function () {
   $(this).toggleClass("selected");
});

【讨论】：