CSSでイベントを取り扱う〜マウスオーバーの例〜

Webページで起きる「イベント」とその処理

Webブラウザを使って、Webページを表示しているとき、コンピュータはさまざまな「イベント」を処理しています。

イベントとは、クリックやマウスの移動のような、ユーザーのアクションによって発生するコンピュータ内の出来事のことを指します（※細かくいうと、「画像ファイルの読み込みを終えた」のように、ユーザーのアクションとは関係なく起きるイベントもあります）。

Webブラウザが処理するイベントの１つに、「マウスオーバー」があります。このイベントは、ユーザーがマウスを特定の要素（ボタンや画像、画面上のある範囲など）の上に置いた時に発生します。

CSSを適切に記述することで、このイベントをきっかけに、リンクの色を変えたり、ボタンの背景色を変えたりすることができます。

サンプルプログラムの動作

以下で、サンプルの動作を確認することができます。

サンプルプログラムでは、マウスオーバーイベントを発生させて、画面の要素の表示方法を変えています。

ボタンの上にマウスポインタを移動すると（＝ボタンでマウスオーバーイベントを発生させると）、ボタンの背景色が青から赤に変わります。

「ここにマウスを乗せると」という領域にマウスポインタを乗せると、ヘルプメッセージが追加で表示されます。

また、画像（Monaca Educationのロゴ）にマウスポインタを合わせると、画像の表示が切り替わります（あんこエデュケーションのロゴになる）。

サンプルプログラムのインポート

以下のボタンをクリックすると、Monaca Educationにプロジェクトをインポートできます。

Monaca Educationにインポートする(要ログイン)

CSSで、イベントが発生したら表示方法を変えてみる

サンプルのCSSの詳細は、プロジェクトをインポートし、確認してもらうとして、2点を説明しておきます。

マウスオーバーしたら表示方法を変更する

HTML（ファイルindex.html）では、次の記述でボタンを表示させています。


<button>マウスポインタをボタンの上に合わせる</button>

もちろん、これだけでは、色の表示は変わりません。ファイルindex.htmlのタグ<style>の中にある、次の部分が色の表示の切り替えを実現しています。


button {
    background-color: blue;
    /* 通常時の背景色 */
    color: white;
    /* 通常時の文字色 */
    padding: 10px 20px;
    /* パディング */
    cursor: pointer;
    /* カーソルをポインターにする */
}
        
button:hover {
    background-color: red;
    /* マウスオーバー時の背景色 */
}

前半の、”button { … }” の部分で、マウスオーバーが起きていない、通常時の表示方法を決めています。

後半の、”button:hover { … }” の部分で、マウスオーバーが起きている時の表示方法を決めています。この例では、背景色を赤に指定しています。

なお、”hover”は、「ホバー」です。ヘリコプターや昆虫などが、羽を動かしてその場に浮かぶ様子を「ホバリング」と言いますが、その「ホバー」です。

マウスオーバーしたら、表示する要素を追加する

アプリを操作していて、「このボタンを押すと何が起きるんだろう？」とか「この欄には何を入力したらいいんだろう？」とか、戸惑ったことはありませんか。

マウスカーソルをその要素に合わせたら、操作方法を表示させることができたら便利です（ヘルプメッセージ）。

サンプルアプリの中で、該当するのは、ファイルindex.htmlでは次の部分です。


<!-- ヘルプメッセージを表示する -->
<div id="help-message">ここにマウスを乗せると…</div>

操作方法をヘルプメッセージとして表示しているのは、ファイルindex.htmlの中にある、タグ<style>の中の、次の部分です。


#help-message {
    position: relative;
    /* 擬似要素の位置指定の基準とする */
    border: 1px solid #000;
    /* 枠線 */
    text-align: center;
    /* 中央寄せ */
}
/* マウスオーバー時に表示するメッセージのスタイル
    :hoverや、::after
*/
#help-message:hover::after {
    content: "メッセージが表示されます。幅を指定しておけば、折り返してくれます。";
    width: 200px;
    /* 幅 */
    position: absolute;
    /* 位置を指定。
     ::afterの対象である、#help-messageの位置から見て、
     表示位置を決めるよう指定している */
    left: 40%;
    /* #help-messageの要素の左端から40%ずらした所に表示する */
    top: 70%;
    /* #help-messageの要素の上端から30%ずらした所に表示する */
    background-color: lightyellow;
    /* 背景色 */
    text-align: left;
    /* テキストを左揃えに */
}

後半部分は、” #help-message:hover::after { … } “という形になっています。

このうち、#help-messageは、HTMLファイルの中にあるid=”help-message”の要素（タグ<div>）を指しています。

:hoverは、上でも説明した、「マウスオーバーイベントのとき」という意味です。

さらに::afterという記述が続きます。これは、「後ろの擬似要素の」という意味です。

つまり、まとめると、

「ID属性がhelp-messageの要素について、マウスオーバーイベントが起きたら、後ろに（擬似的に）要素を追加して、表示方法を決める」

という意味になります。