2012-04-25 19 views
1

このウェブサイトでは、あなたが上にマウスを置くと画像にクールな追加が加えられた新しい画像になる矢印リンクが作成されています。私はこれを以下のコードで完全にうまく動作させていましたが、コードをまったく編集しなかったのですが、私が "すべて"の遷移を起こしたときにこれがもう機能しなくなったようです。私は何が間違っているのか分からない。また、これを使用して、単色である背景画像をフェードインして、別の単色である別の背景画像にフェードインします。CSS3背景画像トランジション

a.visitarrow 
{ 
-webkit-transition:all 1.0s ease-in-out; 
-moz-transition:all 1.0s ease-in-out; 
-o-transition:all 1.0s ease-in-out; 
-ms-transition:all 1.0s ease-in-out;   
transition:all 1.0s ease-in-out; 
display:block; 
width:130; 
height:121; 
background-image:url('pictures/visit.png'); 
} 

a.visitarrow:hover 
{ 
-webkit-transition:all 0.5s ease-in-out; 
-moz-transition:all 0.5s ease-in-out; 
-o-transition:all 0.5s ease-in-out; 
-ms-transition:all 0.5s ease-in-out;   
transition:all 0.5s ease-in-out; 
display:block; 
width:130; 
height:121; 
background-image:url('pictures/visithover.png'); 
} 
+0

私はあなたが背景IMGを移行することができませんでしたけれども。それは本当に効果的ですか? – mddw

+0

私はそれが約1週間働いたことを100%確信しています –

+0

おそらくブラウザの更新? Firefoxは昨日更新されました。 – mddw

答えて

1

私は、これは動作するはずと信じて:

a.visitarrow { 
    display: block; 
    width: 130; 
    height: 121; 
    -webkit-transition: 1.0s ease-in-out; 
    -moz-transition: 1.0s ease-in-out; 
    -o-transition: 1.0s ease-in-out; 
    -ms-transition: 1.0s ease-in-out;   
    transition: 1.0s ease-in-out; 
    background-image: url('pictures/visit.png'); 
} 

a.visitarrow:hover { 
    background-image: url('pictures/visithover.png'); 
}