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

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

キーボードを打つ女性の手

jQueryなどのスクリプトは一切不要で、HTMLとCSSだけで実装できます。

サンプルデモ

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


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」で表示させています。スクリプトを使っていないので実装も簡単!サンプルはテキストリンクですが、画像やプレーンテキストでも応用可能です。

関連する記事

この記事が気に入ったら
「いいね!」しよう

この記事が気に入ったら
「いいね!」しよう

最新情報をお届けします

2 件のコメント

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

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

  • 返信 やん |

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

コメント