on hover change background img

jasonc310771 · 11-27-2008, 01: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

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
<!--
#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; }
-->
</style>
</head>

<body>

<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> 
    <ul>
      <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>
    </ul>
  </li>
</ul>

</body>
</html>

abduraooft · 11-27-2008, 01:45 PM

Code:

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

Apostropartheid · 11-27-2008, 05:04 PM

Want to make the first one a:link, abdura? =P

abduraooft · 11-28-2008, 06: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

)

jasonc310771 · 11-28-2008, 08: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

abduraooft · 11-28-2008, 09:05 AM

Look at http://www.w3schools.com/CSS/css_pseudo_classes.asp on proper use of "Anchor Pseudo-classes"