マウスオーバーとは

この記事の目的
Webの世界は日進月歩で進化していて、便利で新しい技術がどんどん登場しています。
その進化に伴い、新たな用語も年々増えています。私たちが提供する「Web制作サービス」
の観点から専門用語を抜粋して分かりやすくお伝えします。

この記事の対象読者
Web制作を始めたばかりの人。
Webデザインを行なっているが、言葉の定義を再確認したい人。
自社でWeb担当を任されたが専門用語についていろいろ知りたい人。
など、Webに限らずDXに携わるすべての方に。

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

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

同じ意味の言葉に「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つの違いは、「子要素にもイベントが発火するか」という違いがあります。

弊社のホームページ制作サービス「ZIUS」の持つ強みをご紹介します！是非一度ご覧になって、その安さ・手軽さを実感してください！