こんにちは、ライターのマサトです！
今回は、対象のHTML要素にマウスカーソルが重なったときに処理を実行できる「mouseover()」について学習をしていきましょう！
この記事では、
・「mouseover()」とは？
・「mouseover()」の使い方
という基本的な内容から、
・「mouseover()」の活用
・「mouseover()」の類似メソッド
などの応用的な使い方に関しても解説していきます。
この記事で、「mouseover()」をしっかり学習して自分のスキルアップを目指しましょう！
「mouseover()」とは？
それでは、まず最初に「mouseover()」について基本的な知識から学習を進めていきましょう！
「mouseover()」は、マウス系のイベント処理でカーソルが特定のHTML要素内に入った時に処理を実行できます。
例えば、ドロップダウンメニューであれば「メニュー」部分にマウスカーソルが重なったときにリストを表示しますよね？
これは「メニュー」部分のHTML要素内にマウスカーソルが入った瞬間にリストを表示する処理が実行されたわけです。
「mouseover()」を活用するとインタラクティブなWebページが作れるので、本記事でぜひマスターしてみましょう！
「mouseover()」の使い方
この章では、「mouseover()」の基本的な使い方について見ていきましょう！
一般的な構文や実際のプログラミング手法、引数に関数を設定する方法について学んでいきます。
基本的な構文と書き方について
まずは、最も基本となる構文について見ていきましょう！
「mouseover()」は、対象となる要素に対して実行することでどのHTML要素内にカーソルが入るのかを指定します。
対象要素.mouseover(function() {
// ここに処理を記述する
})
このように対象要素へ続けてmouseover()を実行するだけです。
引数には関数を指定できるようになっており、この中に実行したい処理を記述すれば良いわけです。
引数の関数は省略可能で、その場合は別で定義したmouseover()の処理を実行するだけになります。（詳細は後述します）
対象要素にマウスオーバーした時の処理方法
それでは、実際のプログラミング手法について見ていきましょう！
まずは、次のようなHTMLがあるとします。
<h1>サンプルタイトル</h1>
このh1要素内にマウスカーソルが入った瞬間に特定の処理を実行してみましょう！
次のサンプル例を見てください！
$('h1').mouseover(function() {
console.log('マウスオーバーしました！');
});
この例では、h1要素に対してmouseover()を実行しているのが分かりますね。
引数の関数内ではコンソールログへ特定の文字列を出力するようにしています。
つまり、h1要素内にマウスカーソルが入った瞬間に、コンソールログへ文字列が出力されるというわけです。
mouseover()の引数に関数を設定する方法
先ほどは、mouseover()の引数へそのまま関数を記述しましたが、別で定義した関数を指定することも可能です。
例えば、次のような関数を定義したとします。
function showMessage() {
console.log('マウスオーバーしました！');
}
これはコンソールログへ文字列を出力する単純な関数です。
この関数をmouseover()の引数に指定するには次のように記述します。
$('h1').mouseover(showMessage);
このように、関数名を引数へ記述するだけなので簡単ですね。
実行したい処理が複雑な場合や、よく使う関数を使い回したい場合などはこのように活用すると良いでしょう。
「mouseover()」の活用
この章では、「mouseover()」を活用したサンプル例を見ていきましょう！
主に、ボタンのクリック処理への活用や画像を切り替える方法について学んでいきいます。
ボタンをクリックしてmouseoverの処理を行う
冒頭でも少し解説しましたが、「mouseover()」は引数を省略することが可能です。
この場合、すでに定義しているmouseover()の処理を実行できるのですが、具体的なサンプルを見てみましょう！
次の例を見てください！
$('h1').mouseover(function() {
$(this).text('マウスオーバーを実行しました');
});
この例では、h1要素内にマウスカーソルが入るとテキストの文字が変化するという処理を記述しています。
そこで、引数なしのmouseover()を次のように記述してみましょう！
$('button').click(function() {
$('h1').mouseover();
})
この場合、ボタン要素をクリックするとh1要素に対して引数なしのmouseover()が実行されます。
そのため、すでに定義されているh1要素に対してのmouseover()の処理が実行されるというわけです。
つまり、h1要素内にカーソルが入るかボタンをクリックすると、テキストの文字が変化するようになるという意味です。
このように「引数」を指定するかどうかで、イベント処理の挙動が変わるので慣れておくようにしましょう。
mouseover()で画像を切り替える方法
今度は、mouseover()を使って画像に変化を加えてみましょう！
CSSに設定した画像を変えることで、特定の要素内にマウスカーソルが入るだけで画像を切り替えることが可能です。
まずは、次のようなHTML要素を作ってみましょう！
<div id="wrap" class="one"></div>
これは空のdiv要素ですが、以下のようなCSSを設定しておきます。
#wrap {
width: 300px;
height: 300px;
background-repeat: no-repeat;
}
「width / height」は画像のサイズに合わせておきましょう。
さらに、2種類の背景画像をCSSで次のように設定しておきます。
.one {
background-image: url('images/sample1);
}
.two {
background-image: url('images/sample2');
}
初期状態では「one」をdiv要素のclass属性に指定しました。
これで、div要素内に1つ目の画像が表示されているはずです。
この状態で、mouseover()を使って画像を切り替えるには次のように記述します。
$('#wrap').mouseover(function() {
$(this).attr('class', 'two');
});
mouseover()の処理に注目してください！
「attr()」を使うことで、Class属性の値を2つ目の画像に変えているのが分かりますね。
このように記述することで、マウスカーソルだけで画像を変化させることができるわけです。
「mouseover()」の類似メソッド
この章では、mouseover()によく似た性質を持ったメソッドについて見ていきましょう！
主に、「mouseout()」「hover()」メソッドについて学んでいきます。
「mouseout()」で対象要素からマウスが離れた時の処理
まずは、mouseover()の逆パターンになる「mouseout()」から見ていきましょう！
「mouseout()」は、対象要素からマウスカーソルが出ていった瞬間に処理を実行することができるメソッドになります。
記述方法はmouseover()と同じで、【 対象要素.mouseout( function() { } ) 】のように記述すればOKです！
例えば、前章の画像切り替えサンプルは次のように記述することも可能です！
$('div').mouseover(function() {
$(this).attr('class', 'two');
}).mouseout(function() {
$(this).attr('class', 'one');
});
この例では、div要素に対して「mouseover().mouseout()」のように続けて実行しています。
これにより、マウスカーソルが「入った時・離れた時」の両方に対して指定した処理を実行できるわけです。
どちらもペアで使われることが多いので、使いこなせるようにしておきましょう！
「hover()」でマウスが対象要素を出入りした時の処理
次に、「hover()」を使ったマウスイベント処理を作ってみましょう！
「hover()」は、1つのメソッドだけで指定のHTML要素内にマウスカーソルが「入った・離れた」時の処理を実行できます。
記述方法としては、【 対象要素.hover( 関数１, 関数２ ) 】のように引数へ関数を2つ設定できます。
「関数１」はカーソルが入った時、「関数２」はカーソルが離れた時の処理をそれぞれ記述できます。
次のサンプル例を見てください！
$('h1').hover(function() {
console.log('マウスカーソルが重なりました！');
}, function() {
console.log('マウスカーソルが離れました！');
});
この例では、h1要素内にマウスカーソルが出入りした時にそれぞれの関数を実行できます。
「hover()」を使うと非常に効率よくマウスイベントが実装できるのが分かりますね。
ただし、マウスカーソルが要素内に入った時だけ処理を実行したい時は「mouseover()」を使うようにしましょう。
「hover()」について基本から応用技まで学びたい方は、次の記事で詳細にまとめているのでぜひ参考にしてみてください！
まとめ
今回は、指定の要素内にマウスカーソルが入った時に処理を実行できる「mouseover()」について学習しました。
最後に、もう一度ポイントをおさらいしておきましょう！
・mouseover()は引数の関数に記述した処理を実行することができる
・引数なしの場合は、事前に定義されているmouseover()の処理を実行する
・「mouseout()」は指定の要素からマウスカーソルが離れた時に実行する
上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう！
