2012-08-03 16 views
5

私は画像の行を持っていて、それぞれはリンクで包まれています。概要は次の要素によって隠されています

マウスを動かすと、各画像の周りに点線の輪郭線が表示されます。

問題は、最後の画像を除くすべてからRHSの輪郭が欠落していることです。

イメージがあたかも左のイメージの輪郭と重なり合っているかのようになります。

私がマウスを動かすと、とにかに4面すべてにアウトラインを表示させることができますか?

(Iは隙間なく互いにまで突き合わせする画像を必要としている。)

IはFF14、クロム、IE9でこれを試してみました。あなたは何ができるか

http://jsfiddle.net/spiderplant0/P3WBG/

+0

@Brandon、それは私が考えたものです。そして、私は再び「実行」をクリックして、突然有効な画像がそこにありました。 –

+0

@Brandon、それらは有効な画像ですか、これを行う良い方法がありますか? – spiderplant0

+0

@ spiderplant0、それは間違いでした。イメージは実際に有効ですが、私はJSFiddleを最初に実行する必要がありました。ごめんなさい。 – Brandon

答えて

9

最も簡単な方法は、代わりにa:hoverをスタイリング(a要素にposition: relativeを割り当て、その後、a > img:hoverz-indexを高めることである。

a > img { 
    position: relative; 
} 

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

JS Fiddle demo

0

その後、img:hoverに、あなたが望むものに境界線を設定し、背景色が何であれ、固体1pxのように各画像の境界線を設定されています。ここで私が話しているかの作業jsFiddleです:
http://jsfiddle.net/P3WBG/12/

+0

+1、これはおそらく私よりも良い答えであり、気の利いた小さなトリックです。 – Brandon

+0

これは、画像間に距離がゼロである必要があるという要件をどのようにカバーしていますか? – lanzz

+0

それは決して必要条件ではなく、ギャップはなく、お互いに突き合わせる必要がありました。私のものはギャップがなく、回避しようとしていた 'position:relative'ハックを使わなくても動作します。 – Vap0r

4

ちょうど彼ら:hoverスタイルにposition: relative; z-index: 1000を追加します。更新updated fiddle

実際に、あなたもz-index、相対的な位置決めを必要としませんそれだけであなたの目標を達成します。

+0

あなたのdownvoteを説明するためにケア? – lanzz

+0

?無罪。 – spiderplant0

+0

あなたは誰でもダウンボートすることに決めました。 – lanzz