【JavaScript】JavaScriptでホバーアクションを実装する

というわけで今回はJavaScriptでホバーアクションを実装する方法をお話しします。
ホバーアクション自体はCSSで簡単に実装できるので中々JavaScriptを使用することは
少ないかも知れませんが、アニメーション等でアクションをJavaScriptにまとめたい！！
という事もありますのでご説明します。

JavaScriptでホバーアクションを実装する

コード紹介

ではさっそくコードをみて行きましょう！！

See the Pen Untitled by そす (@Sosgoyo) on CodePen.

ボタンをホバーすると背景色が赤から黒に変わるという簡単なアクションです。
JavaScriptだけのコードを抜粋します↓

const btn = document.querySelector('.btn')

btn.addEventListener('mouseover',function(){
  btn.style.background = 'black';
})

btn.addEventListener('mouseleave',function(){
  btn.style.background = 'red';
})

では上から順に見て行きましょう！！

変数に代入する

まずはこの一文

const btn = document.querySelector('.btn')

「const」は変数を宣言するために使用するキーワードみたいなものです。
他にも「var」「let」と種類があります。詳細はコチラをご参照ください。

document.querySelector()でdocument内の指定された要素を返します。
今回の場合は.btnを指定しております。

つまり、.btnで指定された要素をbtnという変数に代入しました！！という意味です。

ホバーアクションを指定する

では、本題のホバーアクションの実装部分を見てみましょう！！

btn.addEventListener('mouseover',function(){
  btn.style.background = 'black';
})

addEventListenerはターゲットに特定のイベントが配信されるたびに呼び出される関数を設定します。
ここでいうターゲットはbtnです。
特定のイベントは（）の中で指定していきます。

ホバーアクションはmouseoverで指定します。
ホバーした時のアクションは2行目で指定しています。

最初のコードを見て「あれ？」と思った方もいらっしゃるでしょうが、
「mouseover」はホバーした時の指定になります。
つまり、ホバーを外した時のイベントには作用しません！！

「mouseover」だけを指定するとこうなります↓

See the Pen ブログ用　JavaScriptでホバーアクションを実装する by そす (@Sosgoyo) on CodePen.

どうでしょう？ホバーを外しても色が戻りませんね。
これでは使い物になりません。

ホバーを外した時のアクションを指定する

btn.addEventListener('mouseleave',function(){
  btn.style.background = 'red';
})

ホバーを外した時のアクションはmouseleaveを使用します。
あとは元の色をイベントに指定すればＯＫです！

まとめ

というわけで今回はJavaScriptでホバーアクションを指定する方法をお話しました！
一見JavaScriptは難しそうに見えますが、一つずつ紐解いてみると理解が進むかと思います！
今後もJavaScriptの更新を予定してますのでお楽しみに♪