Background color change on hover

Forum Moderators: not2easy

Message Too Old, No Replies

Background color change on hover

Div does not fill completely

Noisehag

9:42 pm on Jul 11, 2004 (gmt 0)

Hi, I'm doing something wrong here. Only the background color of the hyperlink is changing, not the full div. Probably something simple?

<head><title></title>
<style type="text/css">
body {
font-family:arial;
}
.sub1 {
background-color:#cccccc;
position:absolute;
margin:0px auto;
padding: 3px 8px 4px 8px;
border: 1px solid #ffffff;
}
.sub1 :hover {
background-color:#eeeeee;
}
</style>
</head>
<body>
<div class="sub1"><a href="#">background color change?</a></div>
</body>
</html>

Thanks for any help...

createErrorMsg

10:01 pm on Jul 11, 2004 (gmt 0)

You need to apply the HOVER to the anchor tag, not the <div>, then, set the <a> to display:block so it fills the whole container. When the hover on the <a> takes effect, it makes the color change for the whole container.

.sub1 a {
display:block;
background: #originalcolor;
}

.sub1 a:hover {
background: #newcolor;
}

You may find that you need to set the a:link, a:active, and a:visited properties also in order for the hover to work. The order must be...
link
visited
hover
active

The reason you need to pu the hover on the <a> tag is that some browsers (IE!) do not recognize hover effects on anything but links.

Noisehag

10:26 pm on Jul 11, 2004 (gmt 0)

Excellent, that worked createErrorMsg. Just so you know, I had to move the padding to the anchor as well. Also discovered that having the padding declared for the div and the anchor at the same time caused IE to lock up hard everytime I tried to view the page.

Thanks for the help. :)