・「mouseover()」の類似メソッドなどの応用的な使い方に関しても解説していきます。まとめ「mouseover()」とは?それでは、まず最初に「mouseover()」について基本的な知識から学習を進めていきましょう!「mouseover()」は、マウス系のイベント処理でカーソルが特定のHTML要素内に入った時に処理を実行できます。ドロップダウンメニューであれば「メニュー」部分にマウスカーソルが重なったときにリストを表示しますよね?これは「メニュー」部分のHTML要素内にマウスカーソルが入った瞬間にリストを表示する処理が実行されたわけです。「mouseover()」を活用するとインタラクティブなWebページが作れるので、本記事でぜひマスターしてみましょう!「mouseover()」の使い方この章では、「mouseover()」の基本的な使い方について見ていきましょう!一般的な構文や実際のプログラミング手法、引数に関数を設定する方法について学んでいきます。基本的な構文と書き方についてまずは、最も基本となる構文について見ていきましょう!「mouseover()」は、対象となる要素に対して実行することでどのHTML要素内にカーソルが入るのかを指定します。ここに処理を記述する})このように対象要素へ続けてmouseover()を実行するだけです。引数には関数を指定できるようになっており、この中に実行したい処理を記述すれば良いわけです。引数の関数は省略可能で、その場合は別で定義したmouseover()の処理を実行するだけになります。(詳細は後述します)対象要素にマウスオーバーした時の処理方法それでは、実際のプログラミング手法について見ていきましょう!まずは、次のようなHTMLがあるとします。console.log('マウスオーバーしました!');});この例では、h1要素に対してmouseover()を実行しているのが分かりますね。引数の関数内ではコンソールログへ特定の文字列を出力するようにしています。h1要素内にマウスカーソルが入った瞬間に、コンソールログへ文字列が出力されるというわけです。先ほどは、mouseover()の引数へそのまま関数を記述しましたが、別で定義した関数を指定することも可能です。次のような関数を定義したとします。console.log('マウスオーバーしました!');}これはコンソールログへ文字列を出力する単純な関数です。この関数をmouseover()の引数に指定するには次のように記述します。$('h1').mouseover(showMessage);このように、関数名を引数へ記述するだけなので簡単ですね。実行したい処理が複雑な場合や、よく使う関数を使い回したい場合などはこのように活用すると良いでしょう。「mouseover()」の活用この章では、「mouseover()」を活用したサンプル例を見ていきましょう!主に、ボタンのクリック処理への活用や画像を切り替える方法について学んでいきいます。ボタンをクリックしてmouseoverの処理を行う冒頭でも少し解説しましたが、「mouseover()」は引数を省略することが可能です。$(this).text('マウスオーバーを実行しました');});この例では、h1要素内にマウスカーソルが入るとテキストの文字が変化するという処理を記述しています。$('h1').mouseover();})この場合、ボタン要素をクリックするとh1要素に対して引数なしのmouseover()が実行されます。そのため、すでに定義されているh1要素に対してのmouseover()の処理が実行されるというわけです。h1要素内にカーソルが入るかボタンをクリックすると、テキストの文字が変化するようになるという意味です。このように「引数」を指定するかどうかで、イベント処理の挙動が変わるので慣れておくようにしましょう。今度は、mouseover()を使って画像に変化を加えてみましょう!CSSに設定した画像を変えることで、特定の要素内にマウスカーソルが入るだけで画像を切り替えることが可能です。class="one"></div>これは空のdiv要素ですが、以下のようなCSSを設定しておきます。height」は画像のサイズに合わせておきましょう。2種類の背景画像をCSSで次のように設定しておきます。url('images/sample2');}初期状態では「one」をdiv要素のclass属性に指定しました。これで、div要素内に1つ目の画像が表示されているはずです。この状態で、mouseover()を使って画像を切り替えるには次のように記述します。'two');});mouseover()の処理に注目してください!「attr()」を使うことで、Class属性の値を2つ目の画像に変えているのが分かりますね。このように記述することで、マウスカーソルだけで画像を変化させることができるわけです。「mouseover()」の類似メソッドこの章では、mouseover()によく似た性質を持ったメソッドについて見ていきましょう!主に、「mouseout()」「hover()」メソッドについて学んでいきます。「mouseout()」で対象要素からマウスが離れた時の処理まずは、mouseover()の逆パターンになる「mouseout()」から見ていきましょう!「mouseout()」は、対象要素からマウスカーソルが出ていった瞬間に処理を実行することができるメソッドになります。'one');});この例では、div要素に対して「mouseover().mouseout()」のように続けて実行しています。これにより、マウスカーソルが「入った時・離れた時」の両方に対して指定した処理を実行できるわけです。次に、「hover()」を使ったマウスイベント処理を作ってみましょう!「hover()」は、1つのメソッドだけで指定のHTML要素内にマウスカーソルが「入った・離れた」時の処理を実行できます。】のように引数へ関数を2つ設定できます。「関数1」はカーソルが入った時、「関数2」はカーソルが離れた時の処理をそれぞれ記述できます。console.log('マウスカーソルが離れました!');});この例では、h1要素内にマウスカーソルが出入りした時にそれぞれの関数を実行できます。「hover()」を使うと非常に効率よくマウスイベントが実装できるのが分かりますね。マウスカーソルが要素内に入った時だけ処理を実行したい時は「mouseover()」を使うようにしましょう。2017年12月20日まとめ今回は、指定の要素内にマウスカーソルが入った時に処理を実行できる「mouseover()」について学習しました。最後に、もう一度ポイントをおさらいしておきましょう!・mouseover()は引数の関数に記述した処理を実行することができる・引数なしの場合は、事前に定義されているmouseover()の処理を実行する・「mouseout()」は指定の要素からマウスカーソルが離れた時に実行する上記内容を踏まえて、ぜひ自分でもプログラミングに取り入れて活用できるように頑張りましょう!TweetPocket無料でSEからWebエンジニアへ転職しませんか?侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、システムエンジニアという職業だけどコードが書けない事務作業が多くスキルがないため将来が不安スクールに通うと完全未経験者と同じスタートになるからレベルが合わないという、すでに知識があるSEならではのお悩みがあることに気づきました。弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。こちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。無料体験レッスンを予約する書いた人マサトフリーランスのIT系ライターを8年従事。侍ブログ編集部としては、これまで270記事以上の記事を執筆。Linuxを3年学習。個人プロダクトのWebメディア・アプリ作成経験あり。