Hover-Over und zeigen Änderung Hintergrundfarbe h1

Question

Ich habe ein Bild mit einem eingebetteten Titel h1. Das ganze Bild ist anklickbar. Wenn der Benutzer über h1 schwebt, ändert sich die Hintergrundfarbe von h1 title. Ich möchte, dass sich die Hintergrundfarbe von h1 title auch ändert, wenn der Benutzer das Bild überfliegt, also nicht direkt auf dem h1-Titel. Möglich?

.sh1 h1:hover { 
 
\t background-color: #000; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
} 
 

 
.sh1 { 
 
    background-image: url(https://placeimg.com/140/180/any); 
 
\t margin:30px; 
 
\t text-align:center; 
 
\t float:left; 
 
} 
 

 
.bt { 
 
    background-image: url(https://placeimg.com/140/380/any); 
 
\t margin:30px; 
 
\t text-align:center; 
 
\t float:left; 
 
} 
 

 
.mt { 
 
    background-image: url(https://placeimg.com/240/580/any); 
 
\t margin:30px; 
 
\t text-align:center; 
 
\t float:left; 
 
} 
 

 

 

 
.mt h1:hover { 
 
\t background-color: red; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
} 
 

 
.bt h1:hover { 
 
\t background-color: blue; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
}

<a href="#" class="bt"><h1>BIG TITLE</h1></a> 
 
<a href="#" class="mt"><h1>MEDIUM TITLE</h1></a> 
 
<a href="#" class="sh1"><h1>SMALL H1</h1></a>

Answer 1

Ihre CSS-Selektoren wie folgt ändern:

.sh1 h1:hover =>.sh1:hover h1

.mt h1:hover =>.mt:hover h1 ...

.sh1:hover h1 { 
 
\t background-color: #000; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
} 
 

 
.sh1 { 
 
    background-image: url(https://placeimg.com/140/180/any); 
 
\t margin:30px; 
 
\t text-align:center; 
 
\t float:left; 
 
} 
 

 
.bt { 
 
    background-image: url(https://placeimg.com/140/380/any); 
 
\t margin:30px; 
 
\t text-align:center; 
 
\t float:left; 
 
} 
 

 
.mt { 
 
    background-image: url(https://placeimg.com/240/580/any); 
 
\t margin:30px; 
 
\t text-align:center; 
 
\t float:left; 
 
} 
 

 

 

 
.mt:hover h1 { 
 
\t background-color: red; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
} 
 

 
.bt:hover h1 { 
 
\t background-color: blue; 
 
\t -moz-transition: .6s ease-in-out; 
 
\t -webkit-transition: .6s ease-in-out; 
 
\t -o-transition: .6s ease-in-out; 
 
\t -ms-transition: .6s ease-in-out; 
 
\t transition: .6s ease-in-out; 
 
}

<a href="#" class="bt"><h1>BIG TITLE</h1></a> 
 
<a href="#" class="mt"><h1>MEDIUM TITLE</h1></a> 
 
<a href="#" class="sh1"><h1>SMALL H1</h1></a>