CODEWITHSUNDEEP
csshovercss-selectors
shearnonsense
shearnonsense

Reputation: 486

Styling multiple same-level elements on hover

I have HTML markup like this:

<div id="blocks">
    <div class="block"></div>
    <div class="block"></div>
    <div class="block"></div>
</div>

I would like to style all the .block elements that aren't hovered when I hover on a .block. Is there a way that this can be accomplished with just CSS?

Can I do this with a CSS rule similar to .block:hover .block:not(:hover)?

Upvotes: 2

Views: 1605

Answers (2)

melhosseiny
melhosseiny

Reputation: 10144

#blocks:hover {
    background-color: blue;
}

.block:hover { 
    background-color: yellow;   
}

See fiddle.

Alternative solution

.block:hover {
    background-color: blue;
}

#blocks:hover .block:not(:hover) { 
    background-color: yellow;   
}

See updated fiddle.

Upvotes: 4

DanielB
DanielB

Reputation: 20220

#blocks:hover .block {} for all non hovered elements, but a hovering over the whole #blocks element and #blocks .block:hover {} for the hovered element should work.

Upvotes: 2

Related Questions