▼EntryMore▼

HTML ソース

CSS ソース01

テクニック詳細

まずはサンプルの最初の説明から。n

ネガティブマージンで相殺する

ポイントとなるのはネガティブマージンです。
.mouseoverBorderSample01 a:hover imgの部分を見てもらうと分かりますが、四方のmarginを-3pxし、かつborderの幅も同様に3pxとしています。n

こうすることで、 border の 3px 分飛び出るところを、ネガティブマージンの margin: -3px で相殺している、というわけです。n

モダンブラウザ向けにはこれで問題ないのですが、やはり IE6 ではうまく動きません。
しかも標準準拠モードと後方互換モードでさらに違いも出てきます。n

IE6 対策

まず、標準準拠の場合は img 要素に対してfloat: leftとposition: relativeのふたつを指定します。
float を指定しないと正常に border が表示されません。n

また、"IE6で背景が表示されない際にチェックすること" で説明していますが、IE6 の場合、ネガティブマージンを指定するとそのマイナス分の部分が表示されない、ということがあります。
そのため、position: relativeを指定することで、この問題を回避します。n

続いて img にではなく、親要素となる a 要素の:hover擬似クラスに対してzoom: 1を指定します。
これは単純に img 要素に float を設定しているため、IE 向けのclearfixを適用して、float を実質無効化している、ということです。n

標準準拠モードであれば、上記で終わりです。
後方互換モードで動作している場合は、さらに次の 2 点を追加しなければなりません。それは、margin-leftとmargin-rightのマイナス部分を倍にする、ということです。n

こうすることで無事、リンクの張られた画像にマウスオーバーした際に、レイアウトを崩さずに画像を囲むように border が出現するようになります。n

※サンプルではこれで問題なかったのですが、実際のサイトに適用しようとしたところ多少の問題があり、他の CSS との兼ね合いなのか、ネガティブマージンの調整がサンプルのものより大きい値をしないと多少のずれが発生しました。なので、実際に組み込んだ際にずれが出る場合は適宜調整してみてください。

CSS ソース02

さて、続いてさも画像の内側に border が表示されているかのようなサンプルの説明です。
これは CSS-Tricks というサイトで紹介されていたテクニックです。n

簡単に解説すると、border を表示したいリンク画像に対してfloat: leftとoverflow: hiddenを指定します。（.mouseoverBorderSample02 a , .mouseoverBorderSample02 a imgの部分です）n

そして、a 要素に:hover 擬似クラスを設定し、そこへborderプロパティを設定します。太さは任意です。n

最後に、上で設定した a 要素が含む img 要素に対してネガティブマージンを設定します。（今回のサンプルではborder,marginともに3px）n

こちらのサンプルは以上で、IE6 の標準準拠モード、後方互換モードともに正常に動作します。やはりスマートですね。こういうオリジナルのサンプルを自分も作ってみたいものですｗn

理屈については最初のサンプルのときに説明したものと同じです。（border と margin で相殺）最初のサンプルは、この相殺を利用した亜種のテクニック、ということですね。n