on css hover, change the color of another element

Question

I have an element with class name "example", when I hover over that element, I want to change another element with class name "example-title" that is below that element to have the color white. How do I do that using sass/css?

<div class="example"></div>
<div class="example-title"></div>

Maybe use this treat http://stackoverflow.com/questions/6910049/on-a-css-hover-event-can-i-change-another-divs-styling — Patrick.v, Mar 24 '16 at 20:29
@Patrick.v That one is marked as a duplicate in a chain of duplicates resolving at the one I posted above, no need to share it in addition. — TylerH, Mar 24 '16 at 20:33

score 2 · Answer 1 · answered Mar 24 '16 at 20:23

2

You can also use ~ selector like this :

.example:hover ~ .example-title { background: red;}

See this fiddle

answered Mar 24 '16 at 20:23

Vincent G

8,547
1
18
36

j08691 · Answer 2 · 2016-03-24T20:22:52.937

1

Use the adjacent sibling selector +:

.example:hover + .example-title {
    white;
}

sass:

.example {
    &:hover {
        & + .example-title {
            color: white;
        }
    }
}

edited Mar 24 '16 at 20:22

answered Mar 24 '16 at 20:19

j08691

204,283
31
260
272

I have .example { background-color: white &:hover { background-color: black; } } How do I nest that in? – Brown A Mar 24 '16 at 20:22

on css hover, change the color of another element

2 Answers2