CSS Image Rollover Effect

Question

I have the following CSS in attempt to create a rollover effect:

#arrow {
    position:absolute;
    left:540px;
    top:150px;
    width:220px;
    height:120px;
}
#arrow a{
    display: block;
    width:220px;
    height:120px;
    text-decoration: none;
    background: url("images/arrow.jpg");
    background-position: 0 -120px;
    }
#arrow a:hover {
    background-position: 0 0;
    }

And later, the div tag:

<div id="arrow">
    <a href="/arrow/arrow.htm"></a>
</div>

However, when my mouse rolls over the image, it doesn't change the background position of the link. Thoughts?

Answer 1

将background-repeat: no-repeat到#arrow a 。

Answer 2

It is working, but your background is repeating so it may look like it's not working at all. So either set no-repeat or for the background-repeat or just take off the url setting and then add it on hove only