View Full Version : on hover change background img

11-27-2008, 02:25 PM
i haev tried to work this out but just keep getting messed up.

wanting to have the img1 to show first then img2 to show on hovering.

please help

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
#nav, #nav ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; line-height:1.5em; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 20px; }
#nav a:link, #nav a:active, #nav a:visited { display:block; padding:0px 5px; border:1px solid #A3D7A0; color:#11147d; text-decoration:none; background-color:#A3D7A0; }

.imgbut .m1 a:hover { background-image: url(images/img1.gif); }
.imgbut .m2 a:hover { background-image: url(images/img2.gif); }
#nav a:hover { background-image: url(images/img1.gif); }

#nav li { float:left; position:relative; }
#nav ul { position:absolute; width:12em; top:1.5em; display:none; }
#nav li ul a { width:12em; float:left; }
#nav ul ul { top:auto; }
#nav li ul ul { left:12em; margin:0px 0 0 10px; }
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li:hover ul ul ul ul { display:none; }
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li li li li:hover ul { display:block; }


<ul id="nav">

<li class="imgbut m1"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a></li>

<li class="imgbut m2"><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;g</a></li>

<li><a href="#">&nbsp;&nbsp;&nbsp;&nbsp;</a>
<li class="imgbut m1"><a href="#">3.1 TEST</a> </li>
<li class="imgbut m2"><a href="#">3.2 TEST</a></li>
<li class="imgbut m1"><a href="#">3.3 TEST</a></li>


11-27-2008, 02:45 PM
.imgbut a:hover { background-image: url(images/img1.gif); }
.imgbut a:hover { background-image: url(images/img2.gif); }

11-27-2008, 06:04 PM
Want to make the first one a:link, abdura? =P

11-28-2008, 07:24 AM
Yes yes.. just copied the OP's code and removed the .m1 part. (Anyway I was almost sure that the OP will never return back :) )

11-28-2008, 09:58 AM
boo i did return!

i had the .m1 .m2 in there as i wanted to have different images for each links non-hover and hover

11-28-2008, 10:05 AM
Look at http://www.w3schools.com/CSS/css_pseudo_classes.asp on proper use of "Anchor Pseudo-classes"