Assign background-color to all elements of the same class

Question

Hey there, I'm trying to get the classname of an element I'm hovering and assign a background-color to this specific class. I get the classname with Michel's solution from https://stackoverflow.com/a/21912356 :

$(document).on('mouseover', 'div', function(e) {
console.log($(e.target).attr('class'));

});

But how do I achieve that all the elements of the class I'm hovering get the same color (or - as an improvement - a random color)?

You can use [this solution](https://stackoverflow.com/a/40697801/427146) if you want to use style rules instead. — sabithpocker, Dec 11 '17 at 06:54
@pedram: Because I've got a bunch of classes and with pure CSS I need to write much code to achieve that. — Mr Pickel, Dec 11 '17 at 07:16

gurvinder372 · Accepted Answer · 2017-12-11T13:26:22.227

0

But how do I achieve that all the elements of the class I'm hovering get the same color (or - as an improvement - a random color)?

You are almost there, just use the same class-name as selector

$(document).on('mouseover', 'div', function(e) {
   var className = $(e.target).attr('class');
   $( "." + className ).css( "background-color", ranCol() );
});

var ranCol = () => '#'+(Math.random()*0xFFFFFF<<0).toString(16);

Edit

OP has attached a working fiddle

edited Dec 11 '17 at 13:26

answered Dec 11 '17 at 06:48

gurvinder372

66,980
10
72
94

@gurvinder327: Yeah, it worked for me, thanks! I knew, that I had to use .css on the variable, but didn't managed to get the right syntax. I actually don't understand the last row quite well, but Is there a way to let the background get back to white when I'm hovering out of the element. Also I need to specify (in the last row of your solution, gurvinder327) that the random color shouldn't be white and the temporarily assigned color should be one of the bright ones, so the black colored text should have a nice contrast to background (because black text and dark background is hard to read) – Mr Pickel Dec 11 '17 at 07:03
@MrPickel oh, so you want to generate random color between some specific range, then try https://stackoverflow.com/questions/23277585/javascript-pick-a-random-hex-color-between-a-start-and-end-color ... or otherwise don't make it random (for the sake for legibility and readability) just keep some specific values in an array as possible background-color values. – gurvinder372 Dec 11 '17 at 07:06
@gurvinder327: Thank you again for your help! I've managed now everything I wanted. First: your solutions doesn't work if the classname has a dot in it like `class="F_03.2"` so I've used a php's str_replace to remove the dots. Second: I've modified the last row of your solution according to @traktor53's solution from here: https://stackoverflow.com/a/43195379/8937563 – Mr Pickel Dec 11 '17 at 09:31
@MrPickel Sure, please share the fiddle for changes you have made. I will incorporate the same for the benefit of future readers. – gurvinder372 Dec 11 '17 at 09:33
@MrPickel Thanks, you can not accept and upvote this answer if it has helped you. – gurvinder372 Dec 11 '17 at 13:26

score 0 · Answer 2 · answered Dec 11 '17 at 06:50

0

You can do like this:

$(document).on('mouseover', 'div', function(e) {
    console.log($(e.target).attr('class'));
    if($(e.target).hasClass("some-class"))  //"some-class" will be the class to which you need to apply css.
    {
        $(e.target).attr('style','background-color:blue;');
    }
});

answered Dec 11 '17 at 06:50

Himanshu Upadhyay

6,558
1
20
33

Thanks Himanshu! Unfortunately I've hot a lot of classes, so as your solution I have to write {if($(e.target).hasClass("some-class"))} a lot of times with elseif or switch cases. There is gurvinder372's solution that works really well. However thank you very much for your effort! – Mr Pickel Dec 11 '17 at 07:07

manikant gautam · Answer 3 · 2017-12-11T07:02:59.837

you can set property styleto element. you can use multiple style attributes using jQuery cssmethod .see here. SO you achieve by using JavaScript as well as Jquery as below.

$(document).on('mouseover', 'div', function(e) {
let className = e.target.className.split(" ")[0];
let styles = 'background-color:red; font-size:15em; transform:rotate(20deg)';
document.getElementsByClassName(className)[0].style = styles;
 // or
 $("."+className).css({"background-color":"green"});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div  class="myClass">hello </div>

score 0 · Answer 4 · answered Dec 11 '17 at 06:54

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).on('mouseover', 'div', function(e) {
   var divClass = $(this).attr('class');
   $( "." + divClass ).css( "background-color", getRandomColor() );
});

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}
</script>
</head>
<body>

<div class="first">
<div>one</div>
</div>
<div class="second">
<div>two</div>
</div>
<div class="third">
<div>three</div>
</div>

</body>
</html>

Assign background-color to all elements of the same class

4 Answers4