HTML 同时悬停 img 和文本

Question

需要在 img 上添加边框颜色，并在悬停时为下方的文本添加相同的颜色。

谢谢!

Answer 1

使用 + 选择器选择一个元素 after 一个带有 :hover 伪类的元素:

img:hover {
    border: thick red solid;
}

img:hover + figcaption {
    color: red;
}

<figure>
  <img src="http://placehold.it/350x150" />
  <figcaption>Caption goes here</figcaption>
</figure>

同样的事情，但是 HTML 结构和你的一样:

img:hover {
    border: thick solid green;
}

a:hover + h5 a {
    color: green;
}

<div class="prod">
  <a href="http://">
     <img class="size-full wp-image-682 aligncenter" src="http://placehold.it/350x150" />
  </a>
  <h5 style="text-align: center; margin-top: 15px; text-transform: uppercase; color: #727176;">
    <a href="a/">Letters</a>
  </h5>
</div>