Menu
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>
231
The HTML class attribute is used to specify a class for an HTML element. Multiple HTML elements can share the same class.
To select elements by a given class name, you use the getElementsByClassName() method: let elements = document. getElementsByClassName('className');
The hover selector is a part of the pseudo-class. This effect is used to style the contents in the HTML when the cursor of the mouse hovers over them. We can apply this effect to any element. This article contains some basic usage of a hover class in HTML and CSS.
The :hover CSS pseudo-class matches when the user interacts with an element with a pointing device, but does not necessarily activate it. It is generally triggered when the user hovers over an element with the cursor (mouse pointer).
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");
};
}
};
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
