How can i use css to style all elements with same class when the cursor is over one of them?

30th Aug 2020, 1:01 PM

parsa

2 Answers

+ 1

The answer is no if you don't involve some JavaScript and want a general solution. I'll give some very clear related cases. This will not change styling of the other cool-hover elements but any of them will have a hover effect: <!DOCTYPE html> <html lang="en"> <head> <title>CSS Hover example</title> <style> .cool-hover:hover { background-color: red; } </style> </head> <body> <div class="cool-hover">element 1</div> <div class="cool-hover">element 2</div> <div class="cool-hover">element 3</div> </body> </html> This will behave exactly like you probably want but it is an extremely special case. If all elements you care about are contained by another element, hovering on the parent is the same as hovering on any single element you care about so this CSS will work: <!DOCTYPE html> <html lang="en"> <head> <title>CSS Hover example</title> <style> .cool-hover-container:hover .cool-hover { background-color: red; } </style> </head> <body> <div class="cool-hover-container"> <div class="cool-hover">element 1</div> <div class="cool-hover">element 2</div> <div class="cool-hover">element 3</div> </div> </body> </html> You could get what you likely want with a mixture of CSS and JavaScript, though. Use JS to detect when the cursor hovers over any of those elements and let an extra CSS class like "cursor-hovered" represent the state when the cursor is over at least 1 of the many elements. In other words, add or remove the "cursor-hovered" class with all "cool-hover" elements whenever a cursor hovers over any of the "cool-hover" elements. Then your CSS can specify what properties should be applied. A selector like .cool-hover.cursor-hovered can select when both classes are on the same element.

30th Aug 2020, 2:58 PM

Josh Greig