CSS Rollover Effect

Question

У меня есть следующий CSS в попытке создать эффект ролловера:

#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;
    }

А позже тег div:

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

Однако, когда моя мышь переворачивает изображение, это не меняет фоновое положение ссылки.Мысли?

Answer 1

Добавить background-repeat: no-repeat к #arrow a.

Answer 2

Это работает, но ваш фон повторяется, поэтому может показаться, что он вообще не работает.Поэтому либо установите no-repeat, либо background-repeat, либо просто снимите настройку url, а затем добавьте ее только в hove