通常、マウスホバー時にオブジェクトの枠を太くすると、オブジェクトそのもののサイズが大きくなってしまいます。

 

例えば、元々300pxの正方形オブジェクトがあったとして、ホバー時に5pxの太枠で囲おうとすると、310pxの正方形になってしまいます。

 

ここでは、オブジェクトのサイズは保ったまま、マウスホバーで太枠表示する方法について見ていきましょう。

 

オブジェクトのサイズは保ったまま、マウスホバーで太枠表示する時の考え方

どうしても、1つのオブジェクトで枠の太さを変更すると、オブジェクトそのもののサイズが変わってしまいます。

 

そこで、オブジェクトの上に太枠用の透過オブジェクトを重ねることによって、デザイン崩れを防ぎつつ太枠を表示することを実現します。

 

オブジェクトの上にオブジェクトを重ねる時は、「position: absolute;」の記述を行い、座標を指定することで実現できます。

 

サンプルプログラム

基本のサンプルプログラム

 

HTML

 

CSS

 

横並び3ブロックで、ホバー時にそれぞれ色の違う太枠を表示するサンプルプログラム

 

HTML

 

CSS

 

 

おすすめの記事