MENU

マウスオーバーとは

目次

マウスオーバーとは

マウスオーバーとは、操作画面の中で対象物(ボタンや画像、またはファイルなど)の上にマウスのカーソル(ポインター)を重ねる動作のことを指します。

反対の言葉として、マウスオーバーがボタンや画像の上に重ねることなら逆にボタンや画像の上からマウスカーソルを外すことを「マウスアウト」と言います。

同じ意味の言葉に「rollover:ロールオーバー」「mouse on:マウスオン」「mouse hover:マウスホバー」と呼ぶこともあります。

マウスオーバーの役割

対象にカーソルが重なっている間だけ表示状態が切り替わるなどの視覚効果を持ち、あらかじめ設定された操作や処理が行われたりします。対象の属性や状態をツールチップやポップアップなどで表示したり、クリックできるボタンであることを知らせるなど、ユーザーに補助的な情報を伝えるために用いられます。

スマートフォンなどタッチパネル方式で画面に触れて位置を指示するタイプのコンピュータやソフトウェアでは、マウスカーソルに相当する表示要素がない。そのため、マウスオーバーによる表示・操作も利用することができない。

マウスオーバーのサンプル

カラーチェンジ

Color change

ツールチップ

Tooltip

補助的な説明を表示できます

プッシュダウン

Push Down

マウスオーバーの実装方法

JavaScriptだけではなく、CSSやHTMLでも実装することができます。

HTMLでの記述

HTMLでは、onmouseover属性を使い、変化させることができます。
onmouseover、onmouseoutがそれぞれ、ロールオーバーしたとき、画像からポインタを離したときの動作を意味します。thisとは、「このイベントが発生した場所」を意味します。つまり、「onmouseover=”this.src=’i/img/pause.png””」という記述なら、「ロールオーバーした際に、この場所の画像をbanner_over.jpgに置き換える」という意味となります。

例えば、タイプが画像のinputタグをロールオーバーさせる場合は、下記のように記述します。

    <div>
      <a href="/">
        <img
          src="./img/pause.png"
          onmouseover="this.src='./img/pause.png'"
          onmouseout="this.src='./img/start.png'"
          style="max-width: 500px"
        />
      </a>
    </div>

このonmouse属性を使ったロールオーバーが他の方法と違う点は、inputタグなど、通常ではロールオーバーが難しいタグに対してもロールオーバーが適用できるという点です。

CSSでの記述

CSSにおけるマウスオーバーで要素に変化(アクション)をつけるには、:hoverという擬似クラスを使います。
擬似クラスとは、特定の条件下で要素にクラスを付与することで、その条件下でCSSによる見た目の変化を加えられる仕組みのようなものです。(この場合の「条件」は、マウスが要素の上に乗った時(マウスオーバー)です。)

擬似クラスの使い方は簡単で、対象のセレクタに、:hoverを付け加えるだけです。

<p class="sample_text">サンプルテキスト</p>

      .sample_text {
        width: fit-content;
        width: -moz-fit-content;
        padding: 15px;
        margin: 2rem auto;
        background-color: lightblue;
        color: darkblue;
      }
      .sample_text:hover {
        background-color: white;
}

JavaScript(jQuery)での記述

let test = document.getElementById("test");

test.addEventListener("mouseover", function( event ) {
  // mouseover の対象を強調
  event.target.style.color = "orange";

  // 少し待ってから色をリセット
  setTimeout(function() {
    event.target.style.color = "";
  }, 500);
}, false);

マウスオーバー(Mouseover)とホバー(hover)の違い

最後に、マウスオーバーとホバーの違いをご紹介します。

hover()イベントは、jQueryのイベントの一つ。要素にマウスをホバー(マウスオーバーとマウスアウト)するとイベントが発火します。
hover()とmouseover()の2つのイベントは、どちらも要素にマウスをホバーするとイベントが発火します。2つの違いは、「子要素にもイベントが発火するか」という違いがあります。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

肩書:Webプログラマー兼Webライター
名前:ゆいちゃん
経歴:ライド株式会社ではコーポレートエンジニアとしてWebサイトの開発・保守・運用を行う。
   ホテルマン、総合商社で勤務していた経験から顧客との対話は大切にしている。
   IT系と育児系の情報収集が得意。
保有資格:ITパスポート
使用言語:HTML/CSS, PHP
好きな言葉:Done is better than perfect.

コメント

コメント一覧 (1件)

目次