gpt4 book ai didi

css - 当鼠标悬停在一行上时更改最后一个单元格的颜色,值被考虑在内

转载 作者:行者123 更新时间:2023-11-28 02:31:00 26 4
gpt4 key购买 nike

我正在尝试这样做:如果鼠标悬停在一行上,最后一个单元格将变为红色或黄色,具体取决于值:1 或 0。

好吧,我认为类可以帮助我:添加了 redcell 和 yellowcell。

我受此启发:http://jsfiddle.net/u7tYE/1/我的代码不起作用。

是否可以使用 CSS?

        tr:hover ~ .redcell {
background: red;
}
tr:hover ~ .yellowcell {
background: red;
}
<!DOCTYPE html>
<html>

<head>



</head>

<body>
<table id="table">
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td class="yellowcell">1</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td class="redcell">0</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td class="yellowcell">1</td>
</tr>
</table>
</body>
</html>

最佳答案

您需要子组合器选择器:

tr:hover > .redcell {
background: red;
}
tr:hover > .yellowcell {
background: yellow;
}

 tr:hover > .redcell {
background: red;
}
tr:hover > .yellowcell {
background: yellow;
}
 <table id="table">
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td class="yellowcell">1</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td class="redcell">0</td>
</tr>
<tr>
<td>item1</td>
<td>item2</td>
<td>item3</td>
<td class="yellowcell">1</td>
</tr>
</table>

关于css - 当鼠标悬停在一行上时更改最后一个单元格的颜色,值被考虑在内,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47704054/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com