Marcio Mazzucato Marcio Mazzucato - 4 months ago 12
CSS Question

CSS :hover affect element before the element pointed

I have the following HTML structure:

<ul class="container">
<li>
<a href="#" class="option"></a>
<ul class="submenu">
<li><a href="#">Item A</a></li>
<li><a href="#">Item B</a></li>
</ul>
</li>
</ul>


Is it possible, using CSS, change the backgroung position of "option" when the mouse is over "submenu"?

I saw the CSS Referente and i tried to use ">", "+" and "~", but it doesn't work. I don't know if i am using incorrectly or if it isn't possible.

Can anybody help me please?

EDIT 1

Here is the CSS that isn't working:

a.option~ul.submenu:hover {
background-position:0 -48px;
}


According CSS Referente, in my case, the "~" selects every "ul" element that are preceded by a "a" element, but isn't working for my code.

Answer

The only way to get close to what you are wanting with your html structure is to put a :hover on the li. Something like:

.container > li:hover > .option {
    background-position: 0 0;
}

See this fiddle which doesn't change background-position, but color. When hovering over .submenu there will also be a hover on the parent li.