如何在悬停在另一个元素上时更改元素？

Question

我想知道是否可以将鼠标悬停在一个元素上，并更改另一个元素的悬停状态。问题是我希望将悬停状态应用于dom中的元素，而不是低于。

这是我的标记......

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

和我拥有的CSS（目前显然不起作用）......

a:hover figure img {opacity:0.3}

正如您所看到的，我正在尝试将鼠标悬停在A标记上，然后更改图像上的悬停状态。

如果你想测试，这是一个codepen ...

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

很想知道是否有解决方案。

Answer 1

我不知道你是否要求严格的css解决方案，但总是jQuery.hover()

your example使用此

Answer 2

figure:hover img { opacity: 0.3; }