使用纯 CSS 使悬停效果应用于具有相同属性的相邻兄弟姐妹

Posted 2023-03-06

【中文标题】使用纯 CSS 使悬停效果应用于具有相同属性的相邻兄弟姐妹

【英文标题】：Using pure CSS to make a hover effect apply to adjacent siblings with the same attribute

【发布时间】：2018-02-03 15:22:29

【问题描述】：

我有一个通过 struts2 迭代器（长度和内容可变）生成的表，大致如下所示，但列更多：

<table>
    <tr class="odd" machineId="1" parameterId="1"><td></td></tr>
    <tr class="even" machineId="1" parameterId="2"><td></td></tr>
    <tr class="odd" machineId="1" parameterId="3"><td></td></tr>
    <tr class="odd" machineId="2" parameterId="4"><td></td></tr>
    <tr class="even" machineId="2" parameterId="5"><td></td></tr>
    <tr class="odd" machineId="3" parameterId="10"><td></td></tr>
    <tr class="noParameters" machineId="4"><td></td></tr>
    <tr class="odd" machineId="6" parameterId="8"><td></td></tr>
    <tr class="odd" machineId="7" parameterId="9"><td></td></tr>
</table>

基本上，我想要的是以下内容：

悬停的任何行都需要具有特定颜色。 与被悬停的行具有相同 machineId 值的任何其他行需要具有不同的颜色。 所有其他行都需要使用默认颜色。

我真的希望能够使用默认 CSS（所以没有 SASS）来做到这一点，兼容所有主流浏览器，包括 IE11，如果可能的话（但不是完全必要）IE9。

我正在迁移的现有页面使用 javascript 和 Dojo 1.3（现在正在迁移到 Dojo 1.9）在鼠标悬停时分配自定义突出显示类，但我希望我可以为此使用纯 CSS。如有必要，我可以将 Dojo 1.3 代码转换为 Dojo 1.9，但我宁愿那是我的备用计划。

我可以用纯 CSS 实现我想要的吗？

【问题讨论】：

我不认为你会找到一种直接的方法来使用纯 CSS 实现这一点。

大部分这些都可以用纯 CSS 完成。最大的问题是它是 CSS。级联样式表。这里的级联是关键点。你不能回去。因此，如果您将鼠标悬停在第一个 MachineId=1 上，则可以选择所有没有悬停在其后的 MachineId=1。但是，您不能做相反的事情。我把所有这些都放在了一个小提琴中。如果有人可以更进一步，请随时复制/分叉。 jsfiddle.net/bb12otk4

你是对的，对于反向 ~ 运算符没有任何纯 css 方式，另外你实际上需要定义 machineId 1, 2 ...如果有 100+ machineId，这是不可能的

【参考方案1】：

你的问题的答案是你不能用纯 css 来做， 因为选择器 ~ 只检查前向，因为您需要为每个 machineId 设置一个 css 规则（请参阅 jsfiddle.net/bb12otk4，感谢 'I haz kode'）

但你也不需要更新dojo，javascript可以轻松做到：

all = document.getElementsByTagName("tr");

for(var i = 0; i < all.length; i++) //for (var i in all)
  all[i].onmouseover = function() 
  
    machineId = this.getAttribute('machineId');
    sameId = document.querySelectorAll('[machineId="'+machineId+'"]');
    for(var j = 0; j < sameId.length; j++) //for (var j in sameId)
      sameId[j].style.backgroundColor = 'orange';
    
    
  
  
  all[i].onmouseleave = function() 
    for(var i = 0; i < all.length; i++) //for (var i in all)
      all[i].style.backgroundColor = 'red';
    
  

table tr
  background-color:red;

table tr:hover
  background-color:green !important;

<table>
    <tr class="odd" machineId="1" parameterId="1"><td>machine 1</td></tr>
    <tr class="even" machineId="1" parameterId="2"><td>machine 1</td></tr>
    <tr class="odd" machineId="1" parameterId="3"><td>machine 1</td></tr>
    <tr class="odd" machineId="2" parameterId="4"><td>machine 2</td></tr>
    <tr class="even" machineId="2" parameterId="5"><td>machine 2</td></tr>
    <tr class="odd" machineId="3" parameterId="10"><td>machine 3</td></tr>
    <tr class="noParameters" machineId="4"><td>machine 4</td></tr>
    <tr class="odd" machineId="6" parameterId="8"><td>machine 6</td></tr>
    <tr class="odd" machineId="7" parameterId="9"><td>machine 7</td></tr>
</table>

如果您的 div 具有“默认”背景颜色，您只需删除背景而不是将其设置为红色。

希望有帮助。

【参考方案2】：

我设法通过使代码在具有相同 machineId 的每组 <tr>s 周围添加一个 <tbody> 并将与 machineId 相关的悬停效果添加到表格主体来使其工作。