CSS :hover affect element before the element pointed

Question

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.

Can we see your CSS? also avoid w3schools. there are much better resources out there. https://developer.mozilla.org/en/CSS/CSS_Reference — rlemon, Jun 01 '12 at 15:40
@rlemon: The sin here is not just linking to W3Schools, but linking to W3Schools **and** tagging the question [w3c]... — BoltClock, Jun 01 '12 at 15:42
You read the table wrongly; in there it says `p~ul` selects `ul` that is preceded by `p`. It does not select `p` that precedes or is preceded by `ul`! — BoltClock, Jun 01 '12 at 16:00
"By the CSS Referente, the "~" selects every element that are preceded by a element, but in my case, isn't working." because in your case you want to select the preceding element, this is selecting elements which are preceded by an element. so it is selecting the .submenu — rlemon, Jun 01 '12 at 16:03
@rlemon, RyanWheale said the following in a answer below: "In plain english this reads: When hovering over .submenu, change the background position of the .option which comes immediately AFTER .submenu". I think the problem is because "option" is before "submenu", if i could change the order, maybe it would be resolved. — Marcio Mazzucato, Jun 01 '12 at 16:18
See [How to affect other elements when a DIV is hovered](http://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-a-div-is-hovered). — Dan Dascalescu, Feb 01 '17 at 21:57

Ryan Wheale · Answer 1 · 2012-06-01T16:01:26.437

If you could put the "option" AFTER the UL, then it will work:

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

And this CSS:

.submenu:hover + .option {
    background-position: -20px -20px;
}

In plain english this reads: When hovering over .submenu, change the background position of the .option which comes immediately AFTER .submenu. Hope that helps.

.submenu:hover ~ .option {
    background-position: -20px -20px;
}

This is the same thing as the "+" selector, except the .option does not have to come immediately behind the .submenu. For example, the "+" won't work for the following markup, but the "~" will work.

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

Very clear your explanation, thanks. The problem is that a i can't put "option" after "submenu", i would have many changes in my HTML/CSS structure. Maybe i will try implement the @ScottS suggestion. — Marcio Mazzucato, Jun 01 '12 at 16:06

score 1 · Accepted Answer · answered Jun 01 '12 at 15:51

1

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.

answered Jun 01 '12 at 15:51

ScottS

71,703
13
126
146

It works! Thanks! I've removed only the first ">", so the declaration is this: .container li:hover > .option – Marcio Mazzucato Jun 01 '12 at 18:36

score 0 · Answer 3 · answered Jun 01 '12 at 15:47

0

I don't think this is possible using css since .option is not a child of submenu

answered Jun 01 '12 at 15:47

Huangism

16,278
7
48
74

CSS :hover affect element before the element pointed

3 Answers3