Forum Moderators: not2easy
Could neone tell me how do i make a rollover button in CSS..........It should change the background image and not the color....please help
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<!-- Previous should all be on ONE LINE -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>CSS text-only rollover</title>
<style type="text/css">
#nav-block {
width: 11em;
background-color: #DFE5FF;
border-right: 2px solid #B2BBE1;
border-bottom: 2px solid #B2BBE1;
}
#nav-block ul { text-align:center; padding: 3px; }
#nav-block li { list-style:none; padding: 6px; }
#nav-block a {
display: block;
/* Remember display block on the link
is what makes the mouseover work in IE */
padding:6px;
background-color: #2421A6;
border: 3px outset #6A78B5;
color: #ffc600; font-weight: 700;
font-family:Georgia,verdana,arial,helvetica, serif;
text-decoration:none;
}
#nav-block a:active { color: #ff0000; font-weight: 700; }
#nav-block a:visited { color: #ffc600; font-weight: 700; }
#nav-block a:hover { color: #2421A6; background-color: #ffc600; border: 3px outset #ffc600; }
</style>
</head>
<body>
<div id="nav-block">
<ul>
<li><a href="page-one.html">Page One</a></li>
<li><a href="page-two.html">Page Two</a></li>
<li><a href="page-three.html">Page Three</a></li>
<li><a href="page-four.html">Page Four</a></li>
</ul>
</div>
</body>
</html>
[edited by: Xapti at 10:02 pm (utc) on May 5, 2007]
