CSS图像翻转效果

时间:2011-10-27 00:07:40

标签: html css graphics web

我尝试使用以下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>

但是,当我的鼠标滚过图像时,它不会改变链接的背景位置。想法?

2 个答案:

答案 0 :(得分:5)

background-repeat: no-repeat添加到#arrow a

答案 1 :(得分:0)

它正在工作,但你的背景正在重复,所以看起来它根本不起作用。因此,要么设置不重复,要么设置背景重复,或者只是取消网址设置,然后仅将其添加到hove