CODEWITHSUNDEEP
css
Justin D.
Justin D.

Reputation: 4976

Hover on element and highlight all elements with the same class

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>

Upvotes: 24

Views: 29654

Answers (4)

Nirmit Kotadiya
Nirmit Kotadiya

Reputation: 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .highlight {
        background-color: yellow;
      }
    </style>
    <script>
      document.addEventListener("DOMContentLoaded", function () {
        const un = document.querySelectorAll(".un");
        un.forEach((el) => {
          el.addEventListener("mouseover", () => {
            un.forEach((el) => {
              el.classList.add("highlight");
            });
          });
          el.addEventListener("mouseout", () => {
            un.forEach((el) => {
              el.classList.remove("highlight");
            });
          });
        });
      });
    </script>
  </head>
  <body>
    <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>
      <div class="page right">
        <p class="un">Another paragraph with the same class.</p>
      </div>
    </div>
  </body>
</html>

Upvotes: 0

imfred
imfred

Reputation: 41

In modern CSS, @Chris' answer may be improved upon to work without JavaScript code at all:

html:has(.classname:hover) .classname {
    background-color: yellow;
}

This works thanks to :has being applied to the root element, which is assumed to be html in this example. It could also be svg, for instance. Actually, it could even be just about any selector, for instance to only apply the highlighting to parts of a document contained in the elements matched by this selector.

Upvotes: 4

WuerfelDev
WuerfelDev

Reputation: 140

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>

Upvotes: 3

Chris
Chris

Reputation: 26918

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");
        };
    }
};

Upvotes: 22

Related Questions