How to select multiple elements at once and add hover to them in CSS

Question

How to select multiple divs and apply hover on them in such a way that when cursor is moved on each div, only respective divs gets hovered and not all of them together?

<div class="itemOne"> Menu Item One </div>
<div class="itemTwo"> Menu Item Two </div>
.
.
.
<div class="itemTen"> Menu Item Ten </div>

css:

.itemOne:hover .itemTwo:hover{
   /*this is not working*/
}

or

.itemOne.itemTwo:hover{
  /*this is not working*/
}

Your CSS code is incorrect. Try .itemOne:hover,.itemTwo:hover { ... } Additionally there can be multiple classes for elements. You can specify a common class for all elements to reduce your CSS code to: .itemCommon:hover { ... } — Sachin Singh, Apr 14 '18 at 03:38
read more about css! add coma between your CSS selector `.itemOne:hover, .itemTwo:hover, .itemThree:hover ` — Adam, Apr 14 '18 at 03:38

score 1 · Accepted Answer · answered Apr 14 '18 at 03:38

You have to seperate each selector by a comma.

.itemOne:hover,
.itemTwo:hover,
.itemThree:hover {
    color: black;
}

A more appropriate solution would be to add the same class to all those elements. eg:

<div class='parent'>
    <div class='child'></div>
    <div class='child'></div>
    <div class='child'></div>
</div>


.child:hover {
    color: black;
}

score 0 · Answer 2 · answered Apr 14 '18 at 03:39

Add a common class to all the divs that u want to add the hover effect

<div class="hover-effect itemOne"> Menu Item One </div>
<div class="hover-effect itemTwo"> Menu Item Two </div>
...
<div class="hover-effect itemTen"> Menu Item Ten </div>

then add styles to that hover-effect class in css

.hover-effect:hover {
 //add styles here
 }

score -2 · Answer 3 · answered Apr 14 '18 at 03:37

-2

Give all divs a common class .commonclass:hover{}

answered Apr 14 '18 at 03:37

sullivan

1
2

How to select multiple elements at once and add hover to them in CSS

3 Answers3