悬停并显示更改背景颜色h1

Question

我有一个嵌入式标题h1的图像。整个图像是可点击的href。当用户将鼠标悬停在h1上时，h1标题的背景颜色会发生变化。我希望h1标题的背景颜色也在用户悬停在图像上时发生变化，因此不直接在h1标题上。可能？

.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

更改CSS选择器这样的：

.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>