Controlling CSS based hover effects

Question

To my knowledge, the answer to this is no, can't be done, but I need a second opinion:

If I have the following:

<li>
    <a >#</a>
    <div class="sub">
    #
    </div>
</li>

and have a background image that appears on li a:hover is it possible to have that background stay on when hovering on the .sub div? This also has to work pure CSS - no javascript cheats.

My understanding is because .sub isn't a child of the a we can't reference it in css to keep the hover.

Because the image is for only one section of the code, I can't move it to the li and reference li:hover a.

You mean like this? http://jsfiddle.net/B7Au2/1/ Note, that won't work IE < 8. — Jared Farrish, Mar 02 '12 at 14:45
And yes, you're right, you [can't select parents or traverse up and down in pure CSS](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector). — Jared Farrish, Mar 02 '12 at 14:47
as mentioned, i can't use `li:hover` for the background because of the funkiness with it (long story - i was hoping not to have to rework the whole thing - so much for that). I think Jared has answered it for me - can't be done. :) thanks guys — TH1981, Mar 02 '12 at 14:50
I didn't see that at the end of the sentence. Can you use a class on that `li`, or put the [`div` inside the `a`](http://jsfiddle.net/B7Au2/4/)? — Jared Farrish, Mar 02 '12 at 14:52
I take it the desired behaviour is that hovering `.sub` doesn't cause the background image to appear if you entered it other than through tha `` - otherwise, you could do `li a:hover, li .sub:hover` — Chowlett, Mar 02 '12 at 14:56
If `a` and `.sub` are siblings, they can't affect each other. `.sub` would have to be a child of `a` to affect it with CSS. Otherwise, you'll have to use JavaScript which should be pretty trivial. — jmbertucci, Mar 02 '12 at 15:02
@Fozzyuw--not true. `a` can affect `.sub` with the sibling selector `+`. Note the example for my answer below `a:hover + .sub`. — ScottS, Mar 02 '12 at 15:09
@Fozzyuw--however, in rereading his question, I think I understand better now that he wants a hover effect on `a` when `.sub` is hovered. — ScottS, Mar 02 '12 at 15:14
@Jared Farrish--you can traverse down (not up) by the adjacent sibling `+` selector or the general sibling `~` selectors. — ScottS, Mar 02 '12 at 15:16
@Jared Farrish--your second comment above: "can't select parents or traverse up and down in pure CSS." — ScottS, Mar 02 '12 at 15:24

score 0 · Answer 1 · edited May 23 '17 at 12:12

If you can't use a class on the li or modify the div.sub to be in the a, you're probably out of luck without Javascript:

Is there a CSS parent selector?

However, if you can, you could use:

<ul>
  <li class="sub">
      <a>Class #</a>
      <div class="sub">#</div>
  </li>
  <li>
      <a>Inner #
          <div class="sub">#</div>
      </a>
  </li>
  <li>
      <a>None #</a>
      <div class="sub">#</div>
  </li>
</ul>

li.sub:hover,
li a:hover {
    background: url(http://www.gravatar.com/avatar/e1122386990776c6c39a08e9f5fe5648?s=32&d=identicon&r=PG);
}
li a {
    border: 1px solid blue;
    display: block;
}
.sub {
    border: 1px solid green;
}

http://jsfiddle.net/B7Au2/4/

score 0 · Answer 2 · answered Mar 02 '12 at 15:06

I don't know if you can modify the html, but if you can, try swapping the div and the a:

<li>
    <div class="sub">
    #
    </div>
    <a >#</a>
</li>

Now you can use the adjacent sibling selector:

li a:hover, li .sub:hover + a {background:url('some-image.png')}

Unfortunately there's no way to select the previous element through CSS: that's why you need to swap your elements.

ScottS · Accepted Answer · 2012-03-02T15:44:26.933

0

Not sure what all you are trying to achieve, but there are many hover effects that can be done.

SECOND UPDATE: If you don't need to interact (other a tags, etc) at all with anything in the div, then this way cheats to get the effect. Note how the anchor inside the div does not register because of the z-index.

UPDATE I think I understand your issue better now. Can you add a wrapper and do the following?:

Example HTML:

<ul>
  <li>
    <div>  
      <a>Some anchor text</a>
      <div class="sub">Some div content <a>and anchor</a></div>
    </div>
  </li>
</ul>

Example CSS:

li:hover {
    background-color: cyan;
}


li > div:hover > a {
    background-color: green;
}

a:hover {
    color: yellow;
    display: block;
}

a:hover + .sub {
    outline: 1px solid blue;
}

.sub:hover {
    color: red;
    outline: 1px solid red;
}

edited Mar 02 '12 at 15:44

answered Mar 02 '12 at 15:07

ScottS

71,703
13
126
146

i've never seen the `+` in css before. i've seen `>` but don't understand it's use. I'm not even sure what those are called to try and research. you wouldn't happen to have a link that explains how those work? Thanks! – TH1981 Mar 02 '12 at 15:43
@Aninemity--can you explain further why you think you cannot use `li:hover a` (or some `li:hover`) for the effect you want. That just doesn't seem to make sense to me. – ScottS Mar 02 '12 at 15:54
@Aninemity--and glad I could make your day :-). – ScottS Mar 02 '12 at 15:55

Controlling CSS based hover effects

3 Answers3

Example HTML:

Example CSS:

Linked