Question

我的html中有一个图片和标题：

<div class="col-md-4 no-underline-hover">
 <a class="rightImg">
    <img class="img-responsive icon-img homepage-icon" src="{{asset('assets/img/homepage/icons/1.png')}}" alt="Greece-1173 - Temple of Athena by Dennis Jarvis, on Flickr">
     <h3 class = "gray-color homepage-icon-detail">perfume </h3>
 </a>
</div>

当我悬停 img 时，我想更改 h3 颜色。我在我的css上使用过：

.homepage-icon-detail .homepage-icon:hover {
    color: hsl(288, 63%, 28%);
}

但它不起作用。有什么建议吗？

Answer 1

您可以使用以下CSS代码进行悬停。您可以使用＆＃39; +＆＃39;来访问兄弟姐妹。在CSS

.homepage-icon:hover +.homepage-icon-detail {
    color: hsl(288, 63%, 28%);
}

更新了小提琴here

Answer 2

一种相当直接的方式：

a.rightImg:hover, a.rightImg:active {
  color: hsl(288, 63%, 28%);
}

Answer 3

您还可以将样式基于结构，而不是显式使用类名。这样，您的HTML将具有更好的可读性，因为您将使用更少的类。

例如;

a.rightImg img:hover + h3 { color: hsl(288, 63%, 28%); }

css - 悬停在sibiling上时改变颜色

3 个答案: