raulbaros raulbaros - 4 months ago 6
CSS Question

Hover-over and show change background-color h1

I have an image with an embedded title h1. The whole image is clickable a href. When the user hovers over h1 then the background-color of h1 title changes. I would like that the background-color of h1 title changes also when user hovers over the image, so not directly on the h1 title. Possible?



.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

Change your css selectors like this:

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

Comments