PDA

View Full Version : CSS A:Hover Question


bear
July 17th, 2008, 01:19 PM
I'm trying to do this without resorting to javascript. I cannot change the background on an a:hover. What could I be doing wrong?


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#tbleMenu td div
{/* */
width:127px;
height:18px;
font-size:11px;
background-color:#0099CC;
border:1px #00CCFF solid;
padding:10px;
padding-top:5px;
padding-bottom:14px;
font-family:Arial, Helvetica, sans-serif;
font-size:11px;

}

#tbleMenu a
{
text-decoration: none;
font-weight:bold;
}

#tbleMenu td a:hover
{
/* color:#FFFFFF; */

background-color:#FFFFFF;
}
</style>
</head>

<body>
<table id= 'tbleMenu'
border="0">
<!-- Menu Content Start -->
<tr>
<td><a href=''><div>Connect with your classmates</div></a></td>
<td><a href=''><div>Connect with your classmates</div></a></td>
<td><a href=''><div>Connect with your classmates</div></a></td>
</tr>
<tr>
<td><a href=''><div>Connect with your classmates</div></a></td>
<td><a href=''><div>Connect with your classmates</div></a></td>
<td><a href=''><div>Connect with your classmates</div></a></td>
</tr>
<!-- Menu Content End -->
</table>
</body>
</html>
redelite
July 17th, 2008, 01:21 PM
a:link,
a:visited {
background: #f00 url(path/to/image.jpg) no-repeat top left;
}

a:hover {
background: #00f url(path/to/image.jpg) no-repeat top left;
}


like so?

Got a link we can look at?
bear
July 17th, 2008, 03:04 PM
My bad....
redelite
July 17th, 2008, 03:20 PM
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<style type="text/css">
<!--
#tbleMenu a:link,
#tbleMenu a:visited {
background: #09c;
display: block;
width:127px;
height:18px;
font-size:11px;
text-decoration: none;
font-weight:bold;
border:1px #00CCFF solid;
padding: 5px 10px 14px 10px;
font-family:Arial, Helvetica, sans-serif;
}

#tbleMenu a:hover {
background:#fff;
}
-->
</style>
</head>

<body>
<table id="tbleMenu" border="0">
<!-- Menu Content Start -->
<tr>
<td><a href='#'>Connect with your classmates</a></td>
<td><a href='#'>Connect with your classmates</a></td>
<td><a href='#'>Connect with your classmates</a></td>
</tr>
<tr>
<td><a href='#'>Connect with your classmates</a></td>
<td><a href='#'>Connect with your classmates</a></td>
<td><a href='#'>Connect with your classmates</a></td>
</tr>
<!-- Menu Content End -->
</table>
</body>
</html>
Here you go! I think this is what you meant. There was no purpose to having those div's in there, which was the primary problem of why you couldn't see the anchors background (the div's had backgrounds).

Hope this helps! :thumb2:

**Edit: Also, as a side note, you need to declare your a:link, and a:visited before you declare your a:hover
w1sh
July 17th, 2008, 04:00 PM
See! If you let me answer the easy ones you can concentrate on the hard ones! :fight:
bear
July 18th, 2008, 08:53 AM
Thanks! Woah. Didn't see that there!


See! If you let me answer the easy ones you can concentrate on the hard ones! :fight:

... yah. Thanks for coming out.