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 4 of 4
  1. #1
    New Coder
    Join Date
    Jun 2002
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts

    a:hover with image in <UL> not behaving

    I have posted this on some other forums but not getting help so need to expand audience.

    I can't get the background to change images, only the <LI> text bg changes. I tried making the .ul and .li separate but that messed other things up.
    [CODE]
    ul.leftside li {
    font: bold 11px Helvetica,sans-serif;
    color: #FFF;
    background: url(images/left_menu-bg.jpg) no-repeat;
    margin: 7px 10px 5px 0px;
    list-style-type: none;
    text-indent: 40px;
    }
    #leftside li a, #leftside li a:visited, #leftside li a:active { color: #FFF; text-decoration: none; }
    #leftside ul a:hover, leftside li a:hover { color: #404040; text-decoration: none; background-image: url(images/left_menu-bg_ovr.jpg); }

    HTML


    <ul class="leftside">
    <li><a href="#">Rooms</a></li>
    <li><a href="#">Reservations</a></li>
    <li><a href="#">Siteseeing</a></li>
    <li><a href="#">Contact Us</a></li>
    </ul>


    [\CODE]
    The hover works but only in the <LI> and not the background for the whole <UL>.


    Thanks in advance for your help!

  • #2
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    You have defined: <ul class="leftside">, so all references to leftside must be .leftside, not #leftside. Plus there seems to be a couple of other problems. See if the following works:

    Code:
    .leftside li a {
      font: bold 11px Helvetica, sans-serif;
      color: #FFF;
      background: url(images/left_menu-bg.jpg) no-repeat;
      margin: 7px 10px 5px 0px;
      list-style-type: none;
      text-indent: 40px;
    }
    
    .leftside li a, .leftside li a:visited, .leftside li a:active { 
      color: #FFF; 
      text-decoration: none; 
    }
    
    .leftside li a:hover { 
      color: #404040; 
      text-decoration: none; 
      background-image: url(images/left_menu-bg_ovr.jpg); 
    }

  • #3
    New Coder
    Join Date
    Jun 2002
    Posts
    25
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks but that isn't doing it either...
    Here's the test site off the client domain:
    Test link
    Notice how only the BG of the menu text changes and not the whole BG

    Here are the 2 BG images starting with the default

    and here's the OVR


    THANKS!

  • #4
    New Coder
    Join Date
    Jun 2008
    Posts
    81
    Thanks
    2
    Thanked 16 Times in 16 Posts
    Just to restate the problem - background-image is being changed on :hover, but the overlying text within <a> tags is limiting the new b/g image from fully showing through when that happens.

    The problem seems to be eliminated if 'li a:hover' is replaced with 'li:hover', but of course that will defeat IE6, which needs :hover to be applied to anchor tags.

    See if the following alternative works:
    1. Add a suitable width to the li (in accordance with the b/g image size).
    2. Add 'display: block' to the 'li a:hover'.


    Code:
    .leftside li {
      font: bold 11px Helvetica,sans-serif;
      color: #FFF;
      /* adjust width to suit b/g image */
      width: 150px;   
      background: url(images/left_menu-bg.jpg) no-repeat;
      margin: 7px 10px 5px 0px;
      list-style-type: none;
      text-indent: 40px;
    }
    
    .leftside li a, .leftside li a:visited, .leftside li a:active { 
      color: #FFF; text-decoration: none; 
    }
    
    .leftside li a:hover { 
      display: block; 
      color: #404040; 
      text-decoration: none; 
      background: url(images/left_menu-bg_ovr.jpg) no-repeat; 
    }


  •  

    Posting Permissions

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