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

Question

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 1

更改您的css选择器：

.sh1 h1:hover =＆gt; .sh1:hover h1

.mt h1:hover =＆gt; .mt:hover h1 ...

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;