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>

鼠标悬停时细胞颜色会发生变化而不会影响文本颜色

3 个答案: