hoverをjqueryで変更したい
こうした悩みを解決します。
早速ですがサンプルをコードペンに書きました。
See the Pen hover jquery by Hidenori Himeno (@hidenori-himeno) on CodePen.
HTMLでボタンを作ってbtnというクラスを宣言しています。
CSSでは、この btnクラスに対して文字を赤色に設定し、ホバー時は文字を青色にするようにしています。
（ホバーはカーソルが要素上に乗った時に実行されるということは大丈夫ですよね）
JSにjQueryを書いています。
JQuery では btnクラスに対してホバーした時に function を実行、ホバー解除時にも function を実行で形で動作を書きます。
この例ではホバーした時に背景を黄色に設定し、 ホバー解除のタイミングで背景を白色に設定（つまり元に戻す）します。
このように、
ホバーさせたいクラスに対して、{ホバー時の処理},{ホバー解除時の処理}を書くことで動的な変更ができるようになります。
JQuery でホバーを動的に変更したい時とは
そもそもCSSで変更できるものをどうしてJQueryで変更させる必要があるの？と思いますよね。
私の場合、お客様からの依頼でページのダークモード化をする時に必要になりました。
もともと白背景に黒塗りのボタンだったんですが、ダークモード化で白黒反転させる必要があり、
ダークモード有効化した時に jQuery で動的にホバーの色を反転させるようにしました。
まとめ
ホバーさせたいクラスに対して、{ホバー時の処理},{ホバー解除時の処理}を書くことで動的な変更ができるようになります
ページのダークモード化をする時に重宝します
立科プログラミングはウェブページの新規作成、機能追加、修正などの依頼を受け付けております。
まずはお気軽にご連絡いただければと思います！よろしくお願いいたします。