要素の内側にボーダーを付ける方法

| コメント(0)
今まで使いドコロがなかったのが不思議なくらいですが、
要素の内側にボーダーを付けるというのを調べました。

aタグで囲った画像をマウスオーバーする際にボーダーを表示させる想定です。

■HTML

<a href="#"><img src="xxxxx.jpg" /></a>


■CSS

a {
  overflow: hidden;
  display: inline-block;
  *display: inline; /* ie6,7 */
  *zoom: 1; /* ie6,7 */
}

a:hover {
  border: 3px solid #000;
}
 
a:hover img {
  margin: -3px;
}

IE6から対応。
赤字部分はインライン表示の指定ですが、ブロック要素かつ横幅100%にならなければなんでも大丈夫です。
複数並べる場合は float でもいいし、display:block; を指定して横幅を決めた div などで囲ってもいいと思います。

aタグのサイズを指定する場合は、a:hover にボーダーを引いた分のサイズを指定しないとならないようです。

130814_oshi_01.jpg


コメントする

このブログ記事について

このページは、gravity-worksが2013年8月14日 10:35に書いたブログ記事です。

ひとつ前のブログ記事は「Google Chromeで印刷に対応する」です。

次のブログ記事は「clearfix当社用」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。