CSS圖像翻轉效果

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