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

谢谢!

最佳答案

使用+选择器在具有: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>

10-05 20:58
查看更多