需要在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>