【CSS】マウスオーバーでちょっとした一言メモを表示させる方法

jsなどを使わずCSSだけで手軽に一言メモを表示させる方法を紹介します。

リンクをマウスオーバーしたら一言メモを表示する

<a href="#" class="memo_link">
	リンク
	<span class="memo">…に対してちょっとしたメモを追加したりできます。<br />改行もOK。</span>
</a>。

.memo {
	display: none;
	position: absolute;
	width: 250px;
	top: 1.1em;
	left: 1.1em;
}
.memo_link {
	display: inline-block;
}
.memo_link:hover {
	position:relative;
	text-decoration:none;
}
.memo_link:hover .memo {
	display: block;
	background: #ededed;
	color: #666;
	padding: 5px;
}

　　　　　　　　　　　　　　　　　　　↓　マウスオーバー

リンクだけでなくdivにも使えます。

<div class="memo_link">普通のdiv要素<span class="memo">…に対してもOK。</span></div>

画像にも使えます。

<div class="memo_link">
	<img src="image.jpg" />
	<span class="memo">画像に対してもOK！</span>
</div>