CSS - die Farbe wechseln, wenn schweben auf sibiling

Question

Ich habe ein Bild und Header in meinem 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> 

I h3 Farbe zu ändern möchte, wenn ich img schweben. Hier habe ich auf meinem CSS:

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

Aber es funktioniert nicht. Irgendwelche Vorschläge?

Answer 1

Sie können diesen Hover mit dem folgenden CSS-Code tun. Sie können Geschwister zugreifen '+' in CSS

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

Aktualisiert Geige here

Answer 2

Ein ziemlich straight forward Weg, es zu tun:

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

Answer 3

Sie können auch Ihr Styling auf Ihrer Struktur stützen, anstatt Klassennamen explizit zu verwenden. Auf diese Weise wird Ihr HTML besser lesbar sein, da Sie weniger Klassen verwenden werden.

Zum Beispiel;

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