2013年8月アーカイブ

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

| コメント(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


このアーカイブについて

このページには、2013年8月に書かれたブログ記事が新しい順に公開されています。

前のアーカイブは2013年4月です。

次のアーカイブは2015年1月です。

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