When I hover on the first <li>
, I want to change the background-color
of the .arrow-tip
class. Can you help me find the correct CSS rule?
HTML:
<nav>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</nav>
<div class="arrow-tip">A triangle tip for the nav menu</div>
CSS:
nav > ul > li:nth-child(1):hover ~ .arrow-tip {
background-color: #FF0;
}
I want a PURE CSS Solution for this.
No, it's not possible with CSS currently, read this.
However, I guess you could do something like this JsFiddle instead.
Edit: Here is the JsFiddle for what OP really wants to achieve.
Please follow the comments above if you're interested.