Grow your CSS skills. Land your dream job.

simple one-button :hover effect

  • # August 20, 2008 at 1:08 pm

    I’m trying to use a hover effect on a one-button nav bar using the navigation matrix method, and I’m having trouble.

    My <div> container for the button is absolutely positioned, and I simply want the button to be a link that changes states on :hover from the top section to the bottom of my background-image (image attached). I’ve done this for entire navigation menus using a <ul>, but never on a single, absolutely positioned <div>. This seems like it should be much simpler, but I can’t seem to figure it out. Can anyone slap me into shape?

    Code:
    Code:
    #button-container {
    width: 82px;
    height: 109px;
    position: absolute;
    left: 688px;
    top: 541px;
    z-index:2;
    background: url(images/serious_btn.jpg) no-repeat;
    overflow: hidden;
    font-size: 1%;
    }

    #button-container span a {
    width: 82px;
    left: 0;
    background: url(images/serious_btn.jpg) no-repeat;
    background-position: 0 0;
    }

    #button-container span a:hover {

    background-position: 0 -109px;
    }

    My CSS is kind of a mess because I’ve tried a bunch of combinations — this is where I left off.

    The size of my background image is 82px X 218px, and the :hover section starts at the 109px height.

    # August 21, 2008 at 2:23 pm

    Well, <a> is an inline element. So, by default, the :hover effect (and therefore the background image change) is only going to apply to the exact area that the "Get Serious" text occupies. But you have the font-size set to 1%, which for me (in Firefox) makes it so small that I can’t see it. I’m guessing that you don’t want the text visible at all, and that’s why you did it that way, but this has the side effect of shrinking the :hover area with it.

    Here’s how to fix it. First, you can get rid of the container and span, and apply the positioning stuff directly to the link (you only have one link, so there’s no point in having a container). Second, give the link a width and a height, and set its display to "block". Then you can remove the "Get Serious" text entirely, and just leave an empty link. The link will occupy the dimensions you specify (82 x 109), and the :hover will then apply to that whole area.

    Here’s how I did it:

    HTML:

    Code:

     

    CSS:

    Code:
    a.button {
    background: url(images/serious_btn.jpg) no-repeat 0 0;
    display: block;
    height: 109px;
    left: 688px;
    position: absolute;
    text-decoration: none;
    top: 541px;
    width: 82px;
    }
    a.button:hover {
    background-position: 0 -109px;
    }

    That works for me. Give it a try!

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

You must be logged in to reply to this topic.

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