The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS simple one-button :hover effect

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #23114

    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?

    #button-container {
    width: 82px;
    height: 109px;
    position: absolute;
    left: 688px;
    top: 541px;
    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.

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.