Using pure CSS to make a hover effect apply to adjacent siblings with the same attribute

Question

I have a table generated through a struts2 iterator (so variable length and content) which roughly looks like this but with more columns:

<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>

Essentially, what I want is the following:

Any row which is hovered over needs to have a certain color.
Any other rows with the same machineId value as the one being hovered over need to have a different color.
All other rows need to have their default color.

I really would like to be able to do this using default CSS (so no SASS), compatible with all major browsers including IE11 and if at all possible (but not completely necessary) IE9.

The existing page I'm migrating uses Javascript for this with Dojo 1.3 (migrating to Dojo 1.9 right now) to assign custom highlight classes on mouseover, but I'm hoping I can use pure CSS for this. If necessary, I can convert the Dojo 1.3 code to Dojo 1.9, but I'd rather that be my backup plan.

Can I achieve what I'm looking for with pure CSS?

I don't think you will find a straightforward way to achieve this with pure CSS. — sol, Aug 25 '17 at 15:04
Most of this can be done with pure CSS. The biggest problem is that it is CSS. Cascading Style Sheet. Cascading here is the key point. You can't go back. So, if you hover the first `MachineId=1` you can select all none hovered `MachineId=1` that come after it. However, you can not do the opposite. I put all of this in a fiddle. If anyone can take this further, please feel free to copy/fork. https://jsfiddle.net/bb12otk4/ — I haz kode, Aug 25 '17 at 15:23
you are right, there isn't any pure css way for a reverse ~ operator, plus you actually need to define machineId 1, 2 ... that isn't possible if there are 100+ machineId — Neil, Aug 25 '17 at 15:25

Neil · Answer 1 · 2017-08-29T12:32:21.173

The answer of your question is that you can't do it with pure css, because the selector ~ only check forwards and because you need to set a css rule for each machineId (see jsfiddle.net/bb12otk4, thanks to 'I haz kode')

but you don't need to update dojo either, javascript can do that easily:

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>

if your divs have a "default" background color, you just have to remove the background instead of setting it to red.

hope that helps.

score 0 · Accepted Answer · answered Jul 22 '19 at 13:33

0

I managed to get it to work by making the code add a <tbody> around each set of <tr>s with the same machineId and adding the machineId related hover effect apply to the table body.

answered Jul 22 '19 at 13:33

Nzall

3,439
5
29
59

Using pure CSS to make a hover effect apply to adjacent siblings with the same attribute

2 Answers2