Hover on element and highlight all elements with the same class

Question

I have many elements with the same class on a web page. I would like to highlight all these elements when I hover one of them. How can I do that in CSS?

Right now, I have this CSS:

p.un:hover { background-color:yellow;}

And my HTML:

<div class="book">
  <div class="page left">
    <p class="un">Karen…</p>
  </div>
   <div class="page right">
     <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p>
   </div>

CSS is mainly a parent -> child relationship. There are sibling selectors (http://css-tricks.com/child-and-sibling-selectors/) but this will only work if the elements are at the same level, we need to see your setup. — TheZ, Oct 08 '12 at 17:47
The nested paragraph tags cannot trigger each other with just CSS in that setup. That would require javascript. — TheZ, Oct 08 '12 at 17:52
I found a solution using JavaScript. See my answer to this similar question: http://stackoverflow.com/a/15960552/975097 — Anderson Green, Apr 12 '13 at 15:41

Chris · Accepted Answer · 2012-10-08T18:21:10.850

22

The best you can do using pure CSS is this:

.classname:hover ~ .classname {
    background-color: yellow;
}

But this only highlights all siblings with a class classname after the hovered element.

You have to use JavaScript to highlight all elements;

var elms = document.getElementsByClassName("classname");
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("yellow");
    };
    elms[i].onmouseout = function() {
        changeColor("white");
    };
}

If you have multiple classes and want to generalize this, use something like this:

var classes = ["one", "two", "three"]; //list of your classes
var elms = {};
var n = {}, nclasses = classes.length;
function changeColor(classname, color) {
    var curN = n[classname];
    for(var i = 0; i < curN; i ++) {
        elms[classname][i].style.backgroundColor = color;
    }
}
for(var k = 0; k < nclasses; k ++) {
    var curClass = classes[k];
    elms[curClass] = document.getElementsByClassName(curClass);
    n[curClass] = elms[curClass].length;
    var curN = n[curClass];
    for(var i = 0; i < curN; i ++) {
        elms[curClass][i].onmouseover = function() {
            changeColor(this.className, "yellow");
        };
        elms[curClass][i].onmouseout = function() {
            changeColor(this.className, "white");
        };
    }
};

edited Oct 08 '12 at 18:21

answered Oct 08 '12 at 17:49

Chris

26,544
5
58
71

3

Imagine how much people will be foaming in their mouths if the subject selector gets implemented: `!.classname ~ .classname:hover, .classname:hover ~ .classname` - well, perhaps not much at all. – BoltClock Oct 08 '12 at 17:55
It doesn't work. I put your code in a script tag : ``. – Justin D. Oct 08 '12 at 17:58
Do I need to use CSS with this setup? – Justin D. Oct 08 '12 at 17:59
@JustinD. Are you sure your ` – Chris Oct 08 '12 at 17:59
If I have many classnames (un, deux, trois, quatre, etc.), is there a quicker way to set the javascript than copying and changing the classname? – Justin D. Oct 08 '12 at 18:03

WuerfelDev · Answer 2 · 2016-08-18T14:30:52.043

Thanks to the answer from Chris. I used his code to write a simple function that does the job. You can place the function in the <head></head> but you need to call it when the page has been loaded, i.e. place in the end of the body. colorout is the background-color

The function:

function hoverByClass(classname,colorover,colorout="transparent"){
    var elms=document.getElementsByClassName(classname);
    for(var i=0;i<elms.length;i++){
        elms[i].onmouseover = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor="orange";//colorover;
            }
        };
        elms[i].onmouseout = function(){
            for(var k=0;k<elms.length;k++){
                elms[k].style.backgroundColor=colorout;
            }
        };
    }
}

and call the function like this:

hoverByClass("un","yellow");
hoverByClass("un2","pink");

I know the question is old, but maybe that help someone else :)

Try it here:

function hoverByClass(classname,colorover,colorout="transparent"){
 var elms=document.getElementsByClassName(classname);
 for(var i=0;i<elms.length;i++){
  elms[i].onmouseover = function(){
   for(var k=0;k<elms.length;k++){
    elms[k].style.backgroundColor=colorover;
   }
  };
  elms[i].onmouseout = function(){
   for(var k=0;k<elms.length;k++){
    elms[k].style.backgroundColor=colorout;
   }
  };
 }
}
hoverByClass("un","yellow");
hoverByClass("un2","pink");

<div class="book">
  <div class="page left">
    <p class="un">Karen…</p><p class="un2">Karen2…</p>
  </div>
  <div class="page right">
    <p class="un">Karen ne se retourne pas. Mme Tilford reste là, apparemment confuse et abattue.</p><p class="un2">Karen2 ne se retourne pas. Mme Tilford2 reste là, apparemment confuse et abattue.</p>
  </div>
</div>

Hover on element and highlight all elements with the same class

2 Answers2

Linked