当前元素之前和之后具有SAME CLASS的所有元素的CSS选择器

Question

I was looking here: CSS Selector for selecting an element that comes BEFORE another element? ...but wasn't able to find a correct answer for my issue.

Here is a fiddle example: https://jsfiddle.net/Munja/bm576q6j/3/

.test:hover, .test:hover + .test

With this, when I :hover element with .test class, I achieved to change style for current element with .test class and first next element with .test class.

What am I trying to achieve?

When I select any row/column (eg agent 2), I want to apply same style for ALL elements with that same class ( .test in this case).

If it is not possible to achieve this with css only, * I am willing to accept and other good solution.*

Thank you.

Answer 1

In your specific case you can use

tbody:hover > .test { 
    background: green;
}

fiddle: https://jsfiddle.net/bm576q6j/4/

Note that if you add more classes in the same tbody it will not give what you want. Check also this question: Hover on element and highlight all elements with the same class

Answer 2

So, after waiting for several more hours, I have decided to use JavaScript solution mentioned in answer from @BasvanStein. Posting it here as answer, to make things easier for someone else with same issue.

Here is a working fiddle: https://jsfiddle.net/Munja/bm576q6j/15/

var elms = document.getElementsByClassName("test");
var n = elms.length;

function changeColor(color) {
    for(var i = 0; i < n; i ++) {
        elms[i].style.backgroundColor = color;
    } 
}
for(var i = 0; i < n; i ++) {
    elms[i].onmouseover = function() {
       changeColor("red");
    };
    elms[i].onmouseout = function() {
       changeColor("white");
    };
}