3 replies [Last post]
newbie_css
newbie_css's picture
Offline
newbie
Last seen: 7 years 26 weeks ago
Joined: 2014-03-17
Posts: 2
Points: 3

Hi,

I would like to change the CSS code below to change the color of the heading of the relevant block when I hover over the block. At the moment the CSS code behaviour only changes the color of the heading when I hover over the heading only. If I hover over the block, the heading won't change color. Any suggestions on how to modify the code? I did try adding h1{color: #41b3fc;}; within the ".block:hover" section, but that didn't work either. Puzzled Puzzled

HTML CODE:

<html>
 
<div class = "block">
<h1> First list</h1><ul>
<li><a href="testurl"> My first item </a></li>
<li><a href="testurl"> My second item </a></li>
</ul>
</div>
 
<div class = "block">
<h1> Second list</h1><ul>
<li><a href="testurl"> My first item </a></li>
<li><a href="testurl"> My second item </a></li>
</ul>
</div>
 
</html>

CSS Code:

.block {
	border-left: 1px solid rgba(0, 0, 0, 0.0);				/* Left border of link block */
	float: left;
	padding: 1em;								/* Padding around link block */
	width: 150px;								/* Link block width */
	-moz-transition:.3s linear;
    -webkit-transition:.3s linear;
}
 
.block:hover {
 
	border-left: 1px solid #41b3fc;
	-moz-transition:.3s linear;
    -webkit-transition:.3s linear;
}
 
h1 {
	margin: 0px;
	font-size: 16px;			
	font-variant: small-caps;
	cursor: pointer;
	-o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}
 
h1:hover {
    	color: #41b3fc;	
	margin: 0px;
	-o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

Well you do need to tell that

Well you do need to tell that whenever you are hovering you block class that it should change things on your h1.
Change the following code:

h1:hover {
    	color: #41b3fc;	
	margin: 0px;
	-o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

into this code:

.block:hover h1 {
    	color: #41b3fc;	
	margin: 0px;
	-o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    -webkit-transition: all 0.5s ease-in-out;
}

Tested it on JSfiddle

Check Maximum Webdesign for your online solutions

newbie_css
newbie_css's picture
Offline
newbie
Last seen: 7 years 26 weeks ago
Joined: 2014-03-17
Posts: 2
Points: 3

Thanks

Thanks, that worked. I hadn't realised that I needed to have:

.block:hover h1{}

helldog2004
helldog2004's picture
Offline
Enthusiast
Netherlands
Last seen: 5 years 6 weeks ago
Netherlands
Timezone: GMT+2
Joined: 2014-03-02
Posts: 205
Points: 239

I am happy it worked out for

I am happy it worked out for you Wink

Check Maximum Webdesign for your online solutions