2016-07-07 243 views
0

我有一個圖片和標題在我的html:CSS - 改變顏色時,懸停在sibiling

<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顏色,當我將鼠標懸停IMG。這裏我用我的CSS:

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

但它不起作用。 有什麼建議嗎?

回答

5

你可以用下面的CSS代碼來懸停。您可以使用「+」訪問同級CSS

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

更新小提琴here

1

做的相當直接的方式:

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

你也可以立足的造型上你的結構,而不是顯式使用類名稱。這樣你的HTML將具有更好的可讀性,因爲你將使用更少的類。

例如;

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

好主意,謝謝你的評論 – AFN