こんにちは。井畑です。 最近、仕事でマウスオーバーする時に画像に枠線をつける指示があったのですが、意外と上手くいかず、つまずいたことがあったので、備忘録としてメモを残しておきます。 マウスオーバーのアクションのひとつとして覚えておいても損はないはずです。それではどうぞ! どうしてレイアウトが崩れてしまうのか? どうして上手くいかなかったかというと、画像のhover時にborderを加える記述を書くのですが、そのborder分、全体の幅が広がってしまい、レイアウトが崩れてしまいました。 悪いDEMO 百聞は一見にしかず。うまくいってないデモをご紹介します。ひよこさんにマウスをあわせてみてください。 …悲しいことになってますねXD
![マウスオーバーした画像にレイアウトを崩さずにborderを表示するCSSの書き方](https://cdn-ak-scissors.b.st-hatena.com/image/square/3743cf5c473afee0597a4f74b2f17d56aebd2d99/height=288;version=1;width=512/https%3A%2F%2Fcreativememomemo.com%2Fwp00%2Fwp-content%2Fuploads%2F2012%2F05%2Fmouse_over_view.jpg)