How can I change the style of another element when a link is hovered - without jQuery/ JavaScript?
ul>li>a:hover main {
opacity: 0.1;
}
main p {
font-size: 200px;
}
<header>
<ul>
<li><a href="#">Hover me</a></li>
</ul>
</header>
<main>
<p>Hello World!</p>
</main>
I want to change the opacity
of the text in main
when the link is hovered.
Is it possible?
EDIT
I tried with a sibling:
a:hover ul {
opacity: 0.5;
}
<header>
<ul>
<li><a href="#">Hover me</a><span></span>
<ul>
<li>Child 1</li>
<li>Child 2</li>
<li>Child 3</li>
</ul>
</li>
</ul>
</header>
But still does not work...
` that is a *descendant* of a `` (when hovered). If you want a sibling you need to use `+` or `~`. For example `a:hover ~ ul`
– j08691 Jul 24 '17 at 15:45