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

2014.04.14 2019.04.25 HP制作

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

Mac

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