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

我有通过struts2的迭代器（所以可变长度和内容），其大致是这样的，但与多个列中产生的表：使用纯CSS使悬停效果应用到相邻的兄弟姐妹具有相同属性

<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相同的machineId值的任何其他行都需要具有不同的颜色。
所有其他行都需要使用其默认颜色。

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

我正在迁移的现有页面在Dojo 1.3上使用Javascript（现在迁移到Dojo 1.9）为mouseover分配自定义高亮类，但我希望我可以使用纯CSS来实现此目的。如果有必要，我可以将Dojo 1.3代码转换为Dojo 1.9，但我宁愿将它作为我的备份计划。

我可以通过纯粹的CSS达到目标吗？

来源

2017-08-25 Nzall

我不认为你会找到一个简单的方法来实现这个纯粹的CSS。 – sol

这大部分都可以用纯CSS来完成。最大的问题是它是CSS。级联样式表。级联在这里是关键点。你不能回去。因此，如果您悬停第一个'MachineId = 1'，您可以选择所有未占用的'MachineId = 1'。但是，你不能做相反的事情。我把所有这些都放在小提琴上。如果任何人可以进一步采取这一点，请随时复制/分叉。 https://jsfiddle.net/bb12otk4/ –

你是对的，没有任何纯css的方式倒退〜运算符，再加上你实际上需要定义machineId 1，2 ...这是不可能的，如果有100+机器ID – Neil

你的问题的答案是，你不能用纯CSS，做到这一点，因为选择〜只检查前锋因为你需要设置一个CSS规则为每个设备ID（见jsfiddle.net/bb12otk4，感谢“我HAZ科德'）

但你并不需要或者更新道场，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有“默认”背景颜色，你只需要删除背景，而不是将其设置为红色。

希望有帮助。

来源

2017-08-25 16:15:07 Neil

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

回答

相关问题