例えば、マウスオーバー・アウトで自分以外の要素のスタイルを変えたい時、1つの要素にマウスオーバー・アウトした時に複数の要素のスタイルを変えたい時など、cssのhoverクラスではカバーできないスタイルのカスタマイズを可能にするためには、jQueryでスクリプトを組むことで実現可能です。

 

ここでは、jQueryでマウスオーバー・マウスアウトで動的にクラスを追加・削除する方法を紹介していきます。

 

マウスオーバー・マウスアウトで動的にクラスを追加・削除するプログラムの考え方

マウスオーバー・アウトで動的にクラスを追加・削除するには、jQueryの「mouseover」「mouseout」「addClass」「removeClass」イベントを使うことによって実現できます。

 

アクションキーとなる要素のidやclassを指定し、その要素に対して「mouseover」「mouseout」イベントが走った時に、クラス付与対象の要素をidまたはclassを指定して「addClass」「removeClass」イベントを処理させます。

 

「mouseover」イベント

要素のマウスカーソルが乗った場合に走るイベントです。

記述ルール(jQuery)

 

「mouseout」イベント

要素のマウスカーソルが外れた時に走るイベントです。

 

記述ルール(jQuery)

 

「addClass」イベント

指定した要素のcssに、指定したクラス名のクラスを追加するイベントです。

 

記述ルール(jQuery)

 

「removeClass」イベント

指定した要素のcssから、指定したクラス名のクラスを削除するイベントです。

 

記述ルール(jQuery)

 

マウスオーバー・マウスアウトでクラスを追加・削除するプログラムの記述方法

jQuery

 

サンプルプログラム

背景色とテキスト色が変化するクラスをマウスオーバーで追加、マウスアウトで削除するサンプルプログラムです。
プログラムは以下の通りです。

 

jQuery

 

HTML

 

CSS

 

 

おすすめの記事