例えば、マウスオーバー・アウトで自分以外の要素のスタイルを変えたい時、１つの要素にマウスオーバー・アウトした時に複数の要素のスタイルを変えたい時など、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
