要素をマウスオーバーした時にJavaScriptで背景色を変える方法
1936 回閲覧されました
みなさんこんにちは、WEB制作のエンジニアのjonioです。
WordPressでループで記事を表示した時に1つの記事をマウスオーバーした時にタイトルの背景色を変えたい場合があります。
それをJavaScriptで実装する方法について解説します。
こんな人向け
jQueryの更新が終わっているのでJavaScriptに切り替えたいけどコードをどうすればいいか分からない人。
jQueryのやり方なら情報がいっぱいありますがJavaScriptでやる場合はネットを見る限りそんなに情報がない印象です。
デモサイト
デモサイトはここから見る事ができます。
考え方とコード
HTMLとCSSのコードは下記になります。
CSSに関してですが今回の内容はサイトを作成する際に使用するのを想定しています。
サイトを作成する時は必ずreset.cssを入れるので私が普段使うreset.cssを記載しています。
私と同じ内容でなくてもいいのでreset.cssは必ず入れてください。
それではJavaScriptの考え方とコードを段階を追って説明します。
1つの記事全体をマウスオーバーした時にタイトルの背景色を変えるので1つの記事全体のセレクタと背景色のセレクタをJavaScriptで取得します。
図にすると↓で1つの記事全体が赤枠でタイトルの背景色が青枠です。（今後1つの記事全体を赤枠、タイトルの背景色を青枠と呼びます）
JavaScriptのコードを↓にします。
1行目と2行目で「querySelectorAll」を使っていますが記事が絶対に1つしかなくて赤枠をマウスオーバーした時に青枠の背景色を変えるなら「getElementById」とかでもいいですが記事のどれかの赤枠をマウスオーバーする時を考える場合は一旦全ての赤枠を取得してfor文に使うため「querySelectorAll」にしています。
そして赤枠をマウスオーバーした時を考えるのでコードを↓にします。
6行目〜12行目ですがどれかの赤枠をマウスオーバーして青枠の背景色を変える時は「for文」でできますが他の場面にも使えるのでfor文の書き方を覚えておくといいです。
8行目の「wrap[i]」は配列の書き方になっていますが1行目の「querySelectorAll」は取得した要素を配列に入れるからこの書き方になります。
次は赤枠をマウスオーバーした時に青枠の背景色を変えるためにコードを↓にします。
10行目は青枠の背景にクラスを追加する事で背景色を変えています。
今の状態だと赤枠からマウスを外しても背景色は変わらないのですがマウスを外したら背景色が戻る様にするためにコードを↓にします。
13行目は7行目と逆の事をしていてマウスを外したらクラスを外す事で背景色を戻しています。
これで完成です。