Question

我问this question。这里补充的另一个问题是：我的html中有一个图片和标题

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>

CSS：

.homepage-icon:hover {
    transform: scale(1.03, 1.03);
}
.homepage-icon {
    transition: 0.3s ease;
}
.homepage-icon:hover +.homepage-icon-detail {
    color: hsl(288, 63%, 28%);
    transform: scale(1.1);

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

每当我悬停homepage-icon时，h3的颜色都会发生变化。我想改变的是我悬停h3时的图标大小。有什么建议吗？

Answer 1

这应该做你想要的事情

h3:hover + .homepage-icon{
    transform: scale(1.03, 1.03);
}

homepage-icon:hover ~ h3{
    color:white;
}

Answer 2

我想你必须这样做：

h3:hover .homepage-icon{
    transform: scale(1.03, 1.03);
}

和

homepage-icon:hover h3{
    color:white;
}

将鼠标悬停在标题标记上并转换图片

2 个答案: