[Solved] How can I change element while hovering over another?

[croydon86]

Hi all

I would like to know if it is possible to hover over one element, and change the hover state of another element. The problem is the element I would like to apply the hover state to is higher up in the dom, not below.

Here is my markup…

<figure>
   <img src="http://placekitten.com/200/300">
  <figcaption>
     <a>View image</a>
  </figcaption>
</figure>

and the CSS I have (which obviously does not work at the moment)…

a:hover figure img {opacity:0.3}

As you can see I am trying to hover over the A tag and then change the hover state on the image.

Here is a codepen if you wish to test…

http://codepen.io/anon/pen/giEGD

Would love to know if there is a solution.

[croydon86]

Ok have come up with a solution that solves the problem if anyone else is in a similar situation…

figure {display:inline-block}
figure:hover img {opacity: 0.3; }

[croydon86]

Forgot to add the code pen http://codepen.io/anon/pen/mDbkI

[Paulie_D]

The problem is the element I would like to apply the hover state to is higher up in the DOM, not below.

While your ‘solution’ might solve your particular problem it isn’t actually doing the above.

You have a hover state of the figure element which affects something inside the element (and thus lower in the DOM).

You could, however do this: http://codepen.io/Paulie-D/pen/hasvk

It doesn’t actually affect anything higher in the DOM, it just looks like it.

[croydon86]

@Paulie_D

That is just it, it does solve my problem. I am aware what is actually happening, and I am fine with it. Unfortunately your solution changes the order of markup, which I can’t do, hence my original problem. Thanks though.

@tomasz86 I am not displaying anything crucial on the hover, it’s mainly for decorative purposes.

[Author]

Posts