Grow your CSS skills. Land your dream job.

Fixed width highlight on hover?

  • MBM
    # July 6, 2012 at 10:13 pm

    I want a fixed width background colour when hovering over my links but no matter what I set the width to the hover is relative to the width of the link. I want the width of the hover the same size as the longest link i.e. Fighter Profiles. It’s more confusing than it sounds.

    http://mbmitservices.co.uk/MMA/index.html

    ul {
    position:relative;
    list-style-type: none;
    margin-top:260px;
    margin-left:100px;
    font-family: 'MMA';
    font-size:30px;
    }

    ul a:hover {
    color:#2864c4;
    background-color:#000000;
    margin-left:-20px;
    padding-left:20px;
    padding-right:20px;
    width:100px;
    }
    # July 6, 2012 at 10:39 pm

    The reason your width isn’t doing anything is because anchor elements are inline by default. Try giving display: block; to your anchor tag and see if that helps.

    # July 6, 2012 at 10:42 pm

    This should work


    ul {
    position:relative;
    list-style-type: none;
    margin-top:260px;
    margin-left:100px;
    font-family: 'MMA';
    font-size:30px;
    }
    ul a {display:block;width:200px;}

    ul a:hover {
    color:#2864c4;
    background-color:#000000;
    margin-left:-20px;
    padding-left:20px;
    padding-right:20px;
    }
    MBM
    # July 6, 2012 at 10:54 pm

    Perfect! Thank you both for the quick reply. It’s funny how you spend 2 hours trying to fix something that it takes someone else only 2 minutes!

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".