CSSの組み合わせ：afterと：hover：複数のHTMLタグが正しく動作しない

Question

CSS：afterと：hover擬似要素を使用して単純なロールオーバーを実装しようとすると、現在問題が発生しています。

は右へのクロックやFacebookのアイコンを見てください：http://clean.philippchristoph.de/

ここでCSSのコードです：あなたが見ることができるように

.icon { 
    background: url('../img/clock_icon.png') top left no-repeat; 
    width: 25px; 
    height: 25px; 
} 

.icon:after { 
    .transition(opacity, .2s, ease); 

    content: " "; 
    position: absolute; 
    top: 4px; left: 5px; bottom: 0; right: 0; 
    background: url('../img/clock_icon.png') no-repeat; 
    background-position: -25px 0; 
    opacity: 0; 
} 

.icon:hover:after, .clock:hover div { 
    opacity: 1; 
} 

、画像をスプライトや不透明度を使用して色あせています。しかし、今は私はもう両方の要素をホバーすることはできません。サンプルページに表示されているように、Facebookのアイコンの上にカーソルを置くことができますが、時計は表示されません。 Facebookのアイコンを削除すると、再び時計の上にカーソルを置くことができます。 2つのアイコンは完全に別々の要素であることに注意してください。

私はこの動作をFFとWindowsのChromeでテストしました。

誰かがこの問題にいくつかの光を当てることができればそれは素晴らしいことだ。.. :)

Answer 1

この1（私だけ言及したクラスを意味し、ないあなたの全体のCSS :)）を使用してCSSを置き換えます

.icon { 
    background: url("../img/clock_icon.png") no-repeat scroll left top transparent; 
    height: 25px; 
    width: 25px; 
    position: relative 
} 

.icon:after { 
    -moz-transition: opacity 0.2s ease 0s; 
    background: url("../img/clock_icon.png") no-repeat scroll -25px 0pt transparent; 
    bottom: 0pt; 
    content: " "; 
    left: 0; 
    opacity: 0; 
    position: absolute; 
    right: 0pt; 
    top: 0; 
} 

.icon:hover:after, .clock:hover div { 
    opacity: 1; 
} 

.facebook, .facebook:after { 
    background-image: url("../img/facebook_icon.png"); 
} 

.clock { 
    position: relative 
} 

.clock div { 
    -moz-transition: opacity 0.2s ease 0s; 
    color: #A0A0A0; 
    font-size: 12px; 
    left: 40px; 
    line-height: 11px; 
    opacity: 0; 
    position: absolute; 
    top: 5px; 
    width: 160px 
} 

Answer 2

あなたがではなく、それに生成されたコンテンツが配置されるように、あなたのiconクラスに対してposition: relativeを追加する必要があります親。私はin a fiddleを単純化しようとしましたが、あなたが何をしているかを100％確信していませんでした。それは近いですか？私はまた、生成されたコンテンツの位置を修正しました。

生成されたコンテンツにトランジションを適用することはできません（このため、これらの要素で不透明なトランジションを実行しようとすると失敗します）。うまくいけば、これは間もなく変わるだろう。