CSSだけで実装！オンマウスでポップアップ表示する簡単な方法

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

jQueryなどのスクリプトは一切使わず、HTMLとCSSをコピーするだけで簡単に実装できるので、ぜひ試してみてください。

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

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

サンプルデモ

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

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

ソースコード

以下がHTMLとCSSのサンプルコードです。コピーしてご自身のプロジェクトに活用してください。

<div class="message">
<a href="#">
WeberNoteってブログが今人気らしいよ
<span class="remark">管理人乙</span>
</a>
</div>

.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;
}

コードの解説

HTML構造

• <div class=”message”> はメッセージを囲む親要素であり、内部に <a> タグを配置しています。
• <a> タグの内部に <span class=”remark”> を追加し、この部分をポップアップメッセージとして使います。

CSSの設定

• .message クラスで、親要素に position: relative; を指定しています。
• .message span.remark クラスで、メッセージ部分を display: none; で非表示にします。
• .message a:hover span.remark で、マウスが <a> タグに乗ったときにメッセージを表示するスタイルを設定します。
• ポップアップメッセージのデザインは、背景色 (background)、境界線 (border)、文字色 (color) などで調整されています。

このテクニックの使いどころ

この方法は、シンプルな通知メッセージや説明文の表示などに使うことができます。実装が非常に簡単なので、複雑なスクリプトなしでテキスト情報をユーザーに見せたいときに役立ちます。

• 画像の補足説明：画像上にマウスを乗せると詳細な説明を表示させる。
• ボタンやリンクの注釈：リンクをクリックする前に注意事項を知らせる。
• フォームフィールドのガイド：入力項目の横に、ガイドとして使用する。

まとめ

CSSだけで簡単に実装できるポップアップメッセージのサンプルコードを紹介しました。jQueryやJavaScriptを使うのが面倒という方や、軽量なサイト構築を目指している方には非常に有用なテクニックです。

また、この方法はリンク以外にも適用できるので、様々な場面で応用できます。ぜひ試してみてください。