通常、マウスホバー時にオブジェクトの枠を太くすると、オブジェクトそのもののサイズが大きくなってしまいます。
例えば、元々300pxの正方形オブジェクトがあったとして、ホバー時に5pxの太枠で囲おうとすると、310pxの正方形になってしまいます。
ここでは、オブジェクトのサイズは保ったまま、マウスホバーで太枠表示する方法について見ていきましょう。
目次
オブジェクトのサイズは保ったまま、マウスホバーで太枠表示する時の考え方
どうしても、１つのオブジェクトで枠の太さを変更すると、オブジェクトそのもののサイズが変わってしまいます。
そこで、オブジェクトの上に太枠用の透過オブジェクトを重ねることによって、デザイン崩れを防ぎつつ太枠を表示することを実現します。
オブジェクトの上にオブジェクトを重ねる時は、「position: absolute;」の記述を行い、座標を指定することで実現できます。
サンプルプログラム
基本のサンプルプログラム
HTML
CSS
横並び３ブロックで、ホバー時にそれぞれ色の違う太枠を表示するサンプルプログラム
HTML
CSS
