マウスオーバーで画像サムネイルを表示するCSStop > 2019 > 1007_CSS_thumbこんなのをやろうとした時のメモ。 CSS側 a.linkImg:hover { position: relative; text-decoration: none; } a.linkImg span { display: none; position: absolute; top: 2.5em; left: 20px; } a.linkImg:hover span { border: none; display: block; width: 210px; } HTML側 <a href="http://www.example.com/" class="linkImg"><span><img src="img/thumb.jpg"></span> CSSのtop:2.5emの所、最初は1emだったのですが、リンクのすぐ下にピッタリくっついてしまうので画像がポップアップした後にマウスカーソルをそのまま下に下すとリンクから外れてもカーソルがポップアップ画像の上にいるうちは消えてくれず、結構邪魔だなと感じました。そこでここの間隔を2.5em程度空けました。 一番下の所でこのポップアップをやると最下部から画像がはみ出してしまい、うまく見れないといった問題もありますが、まぁ、サムネイルだし、いいかな。という気持ち。 top > 2019 > 1007_CSS_thumb |