3

だから私はそのリボントランジションを正確に再現したいhttp://subtlepatterns.com/しかし、私は間違ったことをしています。私のリボン画像は 140x160 [幅、高さ] ですが、ホバリングしても何も起こりません。

置いた：

#toplogo {
    position: absolute;
    left: 400px;
    background-position: 0px -10px;
    z-index: 5000;
}


#toplogo a {
    background: url('ribbon.png') no-repeat;
    width: 140px;
    height: 160px;
    display: block;
    background-position: 0px -10px;
    text-indent: -9999px;
    -webkit-transition: 0.10s ease-in;
    -moz-transition: 0.10s ease-in;
}



<div id="toplogo"> <a href="/">hello</a> </div>
4

2 に答える 2

2

これをCSSに追加します-

#toplogo a:hover{
  background-position: 0px 0px;
}
于 2012-06-15T11:58:59.827 に答える
1

試す

#toplogo a {
    background: url('ribbon.png') no-repeat;
    width: 140px;
    height: 160px;
    display: block;
    background-position: 0px -10px;
    text-indent: -9999px;
    -webkit-transition: background-position .1s ease-in;
    -moz-transition: background-position .1s ease-in;
}

#toplogo a:hover {
  background-position: 0 0;
}
于 2012-06-15T13:16:27.783 に答える