マウスオーバーとは

この記事の目的
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

マウスオーバーに対応したサイトを作成したい、といっても簡単にできることではないかと思います。その際は弊社が運営する「ZIUS」を頼ってみてはいかがでしょうか。ZIUSは格安のホームページ制作を行っています。基本プランでは、最短即日での納品実績もあります。それでいて、月額1,100円という低価格で提供しています。
※CSSやJavaScript(jQuery)の修正は別途費用が掛かる場合もございますので、詳細はお問い合わせください。

ZIUSのホームページが選ばれる理由

業界でも圧倒的な低価格！月額1,100円～: グループ全体でのスケールメリットを活かし、圧倒的な低価格を実現しています。格安でありながら高品質、最高のコストパフォーマンスでホームページを提供いたします。
専任デザイナーによるおしゃれなデザイン: 業務経験豊富（2年以上）で多様な業種や業界に携わったプロのデザイナーが、お客様のホームページ制作を専任で担当します。集客強化、おしゃれさを重視したい等、お客様のご要望をデザインの力で解決します。
細かな指示は不要！簡単すぎるホームページ制作: 簡単なアンケートに答える形式でおしゃれなホームページが作成できます。ゆっくりと考えながらホームページ内容を決めていただけます。