将鼠标悬停在上面并显示更改背景颜色h1

Question

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

.sh1 h1:hover {
	background-color: #000;
	-moz-transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	-ms-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.sh1 {
    background-image: url(https://placeimg.com/140/180/any);
	margin:30px;
	text-align:center;
	float:left;
}
.bt {
    background-image: url(https://placeimg.com/140/380/any);
	margin:30px;
	text-align:center;
	float:left;
}
.mt {
    background-image: url(https://placeimg.com/240/580/any);
	margin:30px;
	text-align:center;
	float:left;
}
.mt h1:hover {
	background-color: red;
	-moz-transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	-ms-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.bt h1:hover {
	background-color: blue;
	-moz-transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	-ms-transition: .6s ease-in-out;
	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 {
	background-color: #000;
	-moz-transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	-ms-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.sh1 {
    background-image: url(https://placeimg.com/140/180/any);
	margin:30px;
	text-align:center;
	float:left;
}
.bt {
    background-image: url(https://placeimg.com/140/380/any);
	margin:30px;
	text-align:center;
	float:left;
}
.mt {
    background-image: url(https://placeimg.com/240/580/any);
	margin:30px;
	text-align:center;
	float:left;
}
.mt:hover h1 {
	background-color: red;
	-moz-transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	-ms-transition: .6s ease-in-out;
	transition: .6s ease-in-out;
}
.bt:hover h1 {
	background-color: blue;
	-moz-transition: .6s ease-in-out;
	-webkit-transition: .6s ease-in-out;
	-o-transition: .6s ease-in-out;
	-ms-transition: .6s ease-in-out;
	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>