テキストにマウスカーソルが合わさるとポップアップメッセージが出てくる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
わかりやすいサンプルを載せていただき、とても簡単に
実現できて感謝しています。
とてもシンプルで簡単につかえました!
ありがとうございました。
その逆を教えてください。
ヤフーで検索しようとすると、カーソルが▼の位置でキーワード入力切替のポップアップが出て、
検索文字が見ずらいです。
その他、アマゾン等のサイトでもポップアップが出て困っています。
PCを買い替えてからこんな症状が出ました。