Question

Can I create button, use a background image that changes on hover and on active, and have the active state show an image that extends outside of the bounds of the anchor? Here’s my sprite:

https://dl.dropbox.com/u/7737304/menu-sprite1.png

The top half of the sprite is ‘hover’, the bottom is ‘active’. I don’t anything below the solid bar to be a clickable link, and I don’t want to set a width as the menu text will set on top and extend beyond the left and right edges of the image.

I’ve attempted to assign the background image to the parent li tag, which works for ‘hover’ but I can’t make it work for ‘active’.

Any ideas?

CSS

.navigation li:hover{
background: transparent url(../images/menu-sprite.png) center -86px no-repeat;
}
.navigation a{
color: #e8e8e8;
font-weight: bold;
text-transform: uppercase;
padding:0.5em 0.8em;
}
.navigation a:hover{
color: #fff;
}
.navigation a.active {
color: #fff;
}

Answer 1

Do you mean something like this ?

The anchor ‘expands’ when active, but doesn’t change the flow, since it uses a negative margin to make it actually the same size as before.

So: add the amount of padding you want to expand the anchor, then add the same amount as a negative margin. (You do need the anchor to be a block or inline-block element, since otherwise it can’t use margin)

No need for JavaScript with this method.