-4

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>
TylerH
  • 20,816
  • 57
  • 73
  • 92
Brown A
  • 889
  • 3
  • 14
  • 21
  • 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

2 Answers2

1

Use the adjacent sibling selector +:

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

sass:

.example {
    &:hover {
        & + .example-title {
            color: white;
        }
    }
}
j08691
  • 197,815
  • 30
  • 248
  • 265
  • I have .example { background-color: white &:hover { background-color: black; } } How do I nest that in? – Brown A Mar 24 '16 at 20:22
1

You can also use ~ selector like this : 

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

See this fiddle

Vincent G
  • 8,344
  • 1
  • 17
  • 33