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
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post

    Problems Using a:hover On Links

    I'm having trouble with my a:hover link background colours.

    My ul code generates a series of strips with the link text inside. My intention is to have the background colour of the whole strip (the list item) change colour when it's moused-over. Everything I have tried fills only the immediate area around the text but will not fill the whole width of the li element itself. I hope this makes sense.

    Here's an example of the code I have used so far:
    Code:
    <ul id="contextmenu">
    <li><a href="url">Option One</a></li>
    </ul>
    And the CSS is:
    Code:
    a:hover {
    text-decoration:none;
    background:#444
    }/* mouse over link */
    I have also tried specifiying the whole li as a link, thus:
    Code:
    <ul id="contextmenu">
    <a href="url"><li>Option One</li></a>
    </ul>
    But that only makes things worse.

    And I have also tried replacing the colours with gif images but still, no dice.

    I'm sure there is some attribute to the link psuedoclass, which specifies the whole width of the li element as a clickable item (therefore 'hoverable') but I can't remember what it is.

    So what am I doing wrong here and please can you help?

    Thanks
    Last edited by Daniel_A_Varney; 07-03-2011 at 06:47 AM.

  • #2
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    Code:
    ul li a { display: block; float: left; }
    Code:
    <ul>
     <li><a href="#"></a></li>
    </ul>
    if the <a> is an image:

    Code:
    ul li a { background-image: url('images/ .jpg') repeat-x; display: block; float: left; }
    ul li a:hover { background-image: none; background-color: #333; }
    Recommended Full Script:

    Code:
    * {
     margin: 0;
     padding: 0;
    }
    
    ul.nav li {
     float: left;
    }
    
    ul.nav li a {
     float: left;
     display: block;
     text-decoration: none;
    }
    
    ul#topBar {
     height: 50px;
    }
    
    ul#topBar li {
     height: 50px;
    }
    
    ul#topBar li a {
     height: 50px;
     line-height: 50px;
     padding: 0px 30px;
    }
    Code:
    <ul id="topBar" class="nav">
     <li><a href="#"></a></li>
     <li><a href="#"></a></li>
    </ul>
    Last edited by Sammy12; 07-03-2011 at 07:17 AM.

  • #3
    Regular Coder
    Join Date
    Jul 2011
    Posts
    105
    Thanks
    12
    Thanked 1 Time in 1 Post
    Thank you, Sammy. I think you answered my question in the other thread, to be honest. Here, I am not working with a left floated set of list items.

    Would you be up for checking over my code, when I have it done? The use of the block level element seems to have put things right but I'm not sure if I have done things correctly. I have not included a ul li style but seperate ul and li styles, using id instead of class.

    Thanks again for the time put into your thoughtful posts.

  • #4
    Registered User
    Join Date
    Jun 2011
    Posts
    1,063
    Thanks
    12
    Thanked 241 Times in 240 Posts
    sure I'll pm you


  •  

    Posting Permissions

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