0

サイト用に作成しているスプラッシュ ページで、ロールオーバー効果を作ろうとしています。複数の背景を持つ CSS3 の機能と :pseudo クラスを使用してこれを実現したいと考えています。

これが私の試みです。ただし、Dreamweaver または Chrome では表示されません。

#1 {
width: 143px;
height: 142px;
background: url(../assets/Home/1a.jpg) top 0px no-repeat;
background: url(../assets/Home/1b.jpg) top -143px no-repeat;
display: inline-block;
}
#1:hover {
background: url(../assets/Home/1a.jpg) top -143px no-repeat;
background: url(../assets/Home/1b.jpg) top 0px no-repeat;
}

これをどのように改善できるか、または私の目標を達成するための代替ルートの提案について何か考えはありますか?

4

2 に答える 2

0

css スプライトを試して、a:hover#l{} などのアンカー タグで囲みましたか (

于 2012-08-19T19:22:46.633 に答える
0

問題はコンテナ ID だと思います: HTML ID タグは数字で始めることはできません。基本的に変更なしであなたのアプローチが機能するようになりました。

HTML

<div id="c1"></div>​

CSS

#c1 {
 border: thin solid black;
 width: 400px;
 height: 200px;
 background: url('http://lorempixel.com/400/200/sports/1/') top left no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top -400px;
 display: inline-block;
}
#c1:hover {
 background: url('http://lorempixel.com/400/200/sports/1/') top -400px no-repeat;
 background: url('http://lorempixel.com/400/200/sports/2/') top left no-repeat;
}

</p>

http://jsfiddle.net/reCSP/

于 2012-08-19T20:03:29.163 に答える