html - アウトラインが次の要素によって隠される

Question

それぞれがリンクでラップされた一連の画像があります。

マウスをホバーすると、各画像の周りに点線のアウトラインが表示されます。

問題は、RHS のアウトラインが最後の画像以外のすべての画像から欠落していることです。

画像が左側の画像の輪郭に重なっているかのようです。

とにかく、ホバーすると4辺すべてにアウトラインが表示されるようにするには?

（隙間なく画像を突き合わせる必要があります。）

FF14、chrome、IE9でこれを試しました。

score 16 · Accepted Answer

最も簡単な方法は、要素に代入position: relativeしてから( のスタイリングではなく、のを増やすことです。az-indexa > img:hovera:hover

a > img {
    position: relative;
}

a > img:hover {
    outline: 3px dotted blue;
    z-index: 3000;
}

score 13 · Accepted Answer

position: relative; z-index: 1000彼らの:hoverスタイルに追加するだけです：更新されたフィドル

更新：z-index実際には、相対的な位置付けだけで目標を達成する必要はありません。

score 0 · Accepted Answer

あなたができることは、背景色が何であれ、各画像の境界線を1pxの実線にimg:hover設定し、次に境界線を希望するものに設定することです。これが私が話していることの動作中のjsFiddleです：http：
//jsfiddle.net/P3WBG/12/

3 に答える 3