CSSでマウスをホバーしてもレイアウトを崩さずにborderを表示する方法

今回はCSSでマウスをホバーしてもレイアウトを崩さずにborderを表示する方法について解説します。

画像にborderをつけるときなんかはborderのせいで幅がおかしくなってレイアウトが崩れたりすることがありますからね。

 

レイアウトが崩れてしまう原因

簡単に言うと、borderを加えると要素の幅が広がってしまうため、他の要素が押し出されてしまうということです。

幅が決まっているレイアウトでこれをやってしまうと不自然な空間ができてレイアウトが崩れる原因になります。

 

レイアウトを崩さずにborderを表示する方法

borderの幅と同じ値をネガティブmarginに指定するだけです。

例えばこんな感じです。

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

画像に3px分のborderがかかるので、3px分marginをマイナスで指定して広がるようにしています。

こうすることでレイアウトを崩さずにborderをつけることができます。

ちなみにIE6では上記の方法は上手くいかないようです。

まあIE6を使っている人なんてほとんどいないので無視できるレベルだとは思いますが。