javascript - 鼠标悬停时单元格颜色会发生变化而不影响文本颜色

Question

我想要一个表格，其中每个单元格都有不同的颜色，鼠标悬停时会更改为指定的特定颜色，而不会影响文本的颜色。没有 JavaScript 有可能吗？
我的三个不同颜色的单元格的简单表格是

<table>
<tr>
<td bgcolor="red">Red</td>
<td bgcolor="blue">Blue</td>
<td bgcolor="green">Green</td>
</tr>
</table>

重新渲染文本颜色对任何单元格都没有影响。我想要这个简单的脚本。

Answer 1

是的，通过使用 CSS 而不是十年前的bgcolor属性。

Answer 2

添加一个类（对于我的示例“tablecell”），并删除 bgcolor。

CSS方式：

.tablecell:hover {
    background-color:#000000; // Put color you want it to be on hover here.
}
.tablecell {
    background-color:#FF0000; // Put color you wan tit to be on not-hover here (optional)
}

Javascript方式：

myElement.addEventListener("onmouseover", mouseIn);
myElement.addEventListener("onmouseout", mouseOut);

function mouseIn() {
    this.style.backgroundColor = "#000000";
}

function mouseOut() {
    this.style.backgroundColor = "#FF0000";
}

jQuery方式：

$(".tablecell").on("hover", mouseIn, mouseOut); // functions above

Answer 3

像这样的东西：

<style type="text/css">
        .td_hover { background-color: white; }
        .td_hover:hover { background-color: yellow; }
        .bg_red { background-color: red; }
        .bg_blue { background-color: blue; }
        .bg_green { background-color: green; }
</style>
<table>
    <tr>
        <td class="td_hover bg_red">Red</td>
        <td class="td_hover bg_blue">Blue</td>
        <td class="td_hover bg_greed">Green</td>
    </tr>
</table>