Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts

    on hover change background img

    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>

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Code:
    .imgbut a:hover { background-image: url(images/img1.gif); }
    .imgbut a:hover { background-image: url(images/img2.gif); }
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Want to make the first one a:link, abdura? =P

  • #4
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    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 )
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #5
    Regular Coder
    Join Date
    Mar 2006
    Posts
    478
    Thanks
    3
    Thanked 0 Times in 0 Posts
    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

  • #6
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,851
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Look at http://www.w3schools.com/CSS/css_pseudo_classes.asp on proper use of "Anchor Pseudo-classes"
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •