テキストにマウスカーソルが合わさるとポップアップメッセージが出てくるCSSのサンプルコードを紹介します。
jQueryなどスクリプトは一切使わず、HTMLとCSSをコピーするだけで簡単に実装できるので楽チンです。
関連記事:【CSS】リンク(aタグ)のクリック範囲を親要素全体(div)に広げる方法
オンマウスでポップアップメッセージを出す方法
サンプルデモ
下のテキストにマウスカーソルを合わせてみてください。
テキストがポップアップ表示されると思います。
ソースコード
HTML
<div class="message">
<a href="#">
WeberNoteってブログが今人気らしいよ
<span class="remark">管理人乙</span>
</a>
</div>
CSS
.message {
position: relative;
}
.message span.remark {
display: none;
}
.message a:hover span.remark {
background: none repeat scroll 0 0 #EEFFEE;
border: 1px solid #CCCCCC;
color: #000000;
display: block;
line-height: 1.2em;
margin: 0.5em;
padding: 0.5em;
position: absolute;
top: 50px;
width: 12em;
}
ポップアップさせたいメッセージを「display:none」で隠して、マウスが乗ったら「a:hover」で表示させています。
サンプルはテキストリンクですが、画像やプレーンテキストでも応用可能です。
Related Posts