Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Change style of all other elements when one element is hovered

Let's say I have a bunch of divs at the same DOM level. When I hover over one, I want all the others to change style (ie. reduce opacity or change background), while the one that is hovered stay the same.

I can't use the + or ~ selectors, because I need it to select all siblings, not just the directly adjacent one or only the following siblings. Basically what I'm looking for is an "all siblings but this one" selector. Does this exist? Is there a way to achieve this without JavaScript?

like image 674
Bobe Avatar asked Sep 14 '12 05:09

Bobe


People also ask

How do you hover with one element and affect another?

if we define 2 HTML elements where we want to hover over one element & at the same moment want to change the style of another element then both the elements should be directly related as either parent-child or sibling, which indicates either one element must be inside another element or both elements should be within ...

How do you style the parent element when hovering a child element?

The trick is to give the sibling the same size and position as the parent and to style the sibling instead of the parent. This will look like the parent is styled!

Which property is used to change the style of an anchor tag while hovering it?

The :hover selector is used to select elements when you mouse over them. Tip: The :hover selector can be used on all elements, not only on links. Tip: Use the :link selector to style links to unvisited pages, the :visited selector to style links to visited pages, and the :active selector to style the active link.

Can you hover pseudo elements?

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).


1 Answers

The trick is to place the hover pseudo-selector on the parent element, and then style the child accordingly. Here is what I'm referring to:

.parent:hover .child {
    opacity: .5;
}
.parent .child:hover {
    opacity: 1;
}

Here is a demo: http://jsfiddle.net/joshnh/FJAYk/

like image 134
joshnh Avatar answered Oct 22 '22 21:10

joshnh