simple hover

[gpigate]

To me this seems easy enough... but for some reason I cant get it to work just right.

I am coding a navbar menu in which I want an icon on the left which changes when hovered upon. It needs to be separate from the text of the link. The background of the image is below. The grey is the base, the orange is the hover, and the example is obviously just to show what I hope to have it look like in the end.

unfortunately this is old code that is still using tables. I am about to whack it all and go with div's. I briefly tried that and couldnt get it to work either, is there something wrong with what im trying to do?


echo "<tr><td width=\"300\">&nbsp;</td><td align=\"left\" class=\"Navbar\"><a href=\"".$nav1['nav1_path']."\"".$relative.">".$nav1['nav1_title']."".$arrow."</a></td></tr>\n";


.Navbar { color: #000000; font-size: 10pt; font-family: Tahoma; text-decoration: None; background: url(navlink_bg.jpg); padding:3px 0px 10px 20px; height:25px; }
.Navbar:hover { color: #000000; font-size: 10pt; font-family: Tahoma; text-decoration: None; background: url(navlink_hover.jpg); padding:3px 0px 10px 20px; height:25px; }

[gpigate]

well I gave up on the hover role and just put in some php code to swap out the orange for the grey square if the navigation link was the current page. Would still like the hover, but not going to beat myself up over it. If I get time to come back to it I will. If anyone has a good solutions let me know.

basically I realized that i needed to break the image class and the link class into separate classes instead of trying to keep them as 1. This allowed me to get the images looking right, but for some reason I still cant get the hover to work.

current code


echo "<tr height=\"25\"><td width=\"300\">&nbsp;</td><td align=\"left\" class=\"NavbarS\" valign=\"middle\"><a href=\"".$nav1['nav1_path']."\"".$relative." class=\"navlink\">".$nav1['nav1_title']."".$arrow."</a></td></tr>\n";


current css


.Navbar { color: #000000; font-size: 10pt; font-family: Tahoma; text-decoration: None; background-image: url(navlink_bg.jpg); height:25px; }
.NavbarS { color: #000000; font-size: 10pt; font-family: Tahoma; text-decoration: None; background-image: url(navlink_hover.jpg); height:25px; }
.Navlink { color: #000000; font-size: 10pt; font-family: Tahoma; text-decoration: None; padding:0 0 0px 15px; vertical-align:top}

[gpigate]

Can what I am trying to do even be done? I have done this before with the onmouseover stuff. I was just thinking it might could be done with a hover on a css image..... maybe not :confused::confused:

[C55inator]

I don't know how to use PHP...

You want the CSS background image to change on hover?

.hovertest {
background-image:url(bg.png);
}
.hovertest:hover {
background-image:url(bg_over.png);
}

WHat browser are you using? IE ignores :hover on anything but <a> tags, so if you are trying to put hover on a div or td, IE won't show it. Also, if your image url is bad, the background will stay the same.

[gpigate]

I never was able to get it working the way I wanted, but oh well. I went with a work around and I am satisfied. thanks for the feedback, it wasnt the url, it didnt work in FF or IE.

[hezz]

:) I think u can us this, it might just solve your problem.

make a vertical image in three stages one as the button, the second as the rollover and the other as hit stage (all three stages as single image )

this as your html file:
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Articles</a></li>
<li><a href="#">Contact Us</a></li>
</ul>

then, use this css to style it:
ul#nav {
list-style-type: none;
padding: 0;
margin: 0;
}
#nav a:link, #nav a:visited {
display: block;
width: 150px;
padding: 10px 0 16px 32px;
font: bold 80% Arial, Helvetica, sans-serif;
color: #FF9900;
background: url("menu_img.gif") top left no-repeat;
text-decoration: none;
}
#nav a:hover {
background-position: 0 -69px;
color: #B51032;
}
#nav a:active {
background-position: 0 -138px;
color: #006E01;
}