I'm kind of new to CSS and hope someone knows how to fix a problem
I've been fighting with for days.
I'm trying to create a mouseover navbar with CSS which inserts a
colored background JPG that fills a transparent cell using "a:hover"
and inserts a different colored JPG after you click on the link and
are on the linked page ("a:active" I assume).
My current test works fine (at least on the "a:hover" part) but the
background won't fill the cell, no matter what I do. When I create a
class and apply it to an ordinary cell, the background jpg fills the
cell with no trouble. But as soon as I try to do the same thing with
links, the background jpg won't fill the cell.
I only want certain, specified links to work this way, not every link
on the page. I haven't created any linked documents yet to test out
the "a:active" part of the navbar. I hope it will work?? The style
sheet needs to be external due to the number of pages I'm going to
have to "upgrade" if I can get this to work.
Your suggestions will be HUGELY appreciated!
========================
MY EXTERNAL STYLE SHEET
========================
..mouseovertest a:link, a:visited {
color: 003366;
font-family: arial;
font-size: 10px;
text-decoration: none;
}
..mouseovertest a:hover {
color: 3399CC;
background: url(../Media/colorchange.jpg);
}
..mouseovertest a:active {
color: 003366;
background: url(../Media/colorchange2.jpg);
}
====================
MY TEST HTML PAGE
====================
<html>
<head>
<meta http-equiv="content-type"
content="text/html;charset=iso-8859-1">
<title>Mouseover test</title>
<link rel="stylesheet" href="../NewFiles/mouseovertest.css"
type="text/css">
</head>
<body>
<table border="1" cellpadding="8">
<tr>
<td class="mouseovertest"><a href="#">Mouseover</a></td>
<td class="mouseovertest"><a href="#">Mouseover</a></td>
<td class="mouseovertest"><a href="#">Mouseover</a></td>
</tr>
</table>
</body>
</html>
