CSS menu using image sprite with transparencies

This is my issue.

I have a menu using an image sprite, the image has transparencies, but when I add a :hover, it开发者_开发百科 works, but I am still able to see the original image at the end.

Is there a way to make the hover show the image that I want and REPLACE the original one?

Thanks,

Marco

You can replace an image by using it as a background-image instead of using the <img> tag.

But most of the times, this is slow and another way is maybe good practice:

1. Create an image that has the :hover image next to it [img|hoverImg]
2. Do a styling with background-position to change the background.

Like this:

.menuItem
{
    background-image: url('hello.jpg');
    width:100px;
    height:30px;
}

.menuItem:hover
{
    background-position: 100px; /* Or whatever measure your image is */
}

The problem with this, is that the image size is fixed. You really have to specify it, instead of just doing this with an image.

I like this as the best way. If you want to set the src in your <img>, this can be done with Javascript, but is much heavier most of the time, because you have to load an extra image from the server.