悬停并显示更改背景颜色h1
问题描述:
我有一个嵌入式标题h1的图像。整个图像是可点击的href。当用户将鼠标悬停在h1上时,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>
答
更改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>
非常感谢,很棒的解决方案! – raulbaros