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

Question

我有一张带有嵌入式标题 h1 的图像。整个图像是可点击的 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>