css - 当悬停在同级上时更改颜色 [英] css - change color when hover on sibiling

问题描述

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

I have an image and header in my 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>

当我悬停时，我想更改 h3 颜色 / em>。这里我使用我的css：

I want to changing h3 color when I hover img. Here I used on my css :

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

但它不工作。
任何建议？

But it doesn't work. Any suggestion?

推荐答案

您可以使用下面的CSS代码悬停。您可以使用CSS中的'+'访问同级

You can do that hover with the below CSS code. You can access sibling using '+' in CSS

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

更新了此处

这篇关于css - 当悬停在同级上时更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！