【CSS】テキストや画像のオンマウスでポップアップメッセージを表示するサンプルコード

テキストにマウスカーソルが合わさるとポップアップメッセージが出てくるCSSのサンプルコードを紹介します。

jQueryなどスクリプトは一切使わず、HTMLとCSSをコピーするだけで簡単に実装できるので楽チンです。

関連記事:【CSS】リンク(aタグ)のクリック範囲を親要素全体(div)に広げる方法

オンマウスでポップアップメッセージを出す方法

サンプルデモ

下のテキストにマウスカーソルを合わせてみてください。
テキストがポップアップ表示されると思います。


WeberNoteってブログが今人気らしいよ
管理人乙

ソースコード

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

3 件のコメント

  • 返信 うすらハゲのおじさん |

    わかりやすいサンプルを載せていただき、とても簡単に
    実現できて感謝しています。

  • 返信 やん |

    とてもシンプルで簡単につかえました!
    ありがとうございました。

  • 返信 sh |

    その逆を教えてください。
    ヤフーで検索しようとすると、カーソルが▼の位置でキーワード入力切替のポップアップが出て、
    検索文字が見ずらいです。
    その他、アマゾン等のサイトでもポップアップが出て困っています。
    PCを買い替えてからこんな症状が出ました。

Comment