HTMLでマウスオーバー時にスタイルを変える方法【現役エンジニアが解説】
今回は、HTMLでマウスオーバー時にスタイルを変える方法について、CSSを使う方法と使わない方法に分け、簡単に解説していきます。
HTMLの例
マウスオーバー時にスタイルを変えるにはCSSを使います。
HTMLでは、対象の要素にclass属性を付与するだけで、あとはCSSで設定します。
<button class="hoge-button" style="background-color:orange;padding:5px 20px;">ほげボタン</button>
上記のコードでは、ほげボタンという名前のbutton要素にhoge-buttonのクラス名を付けて表示しています。
CSSを使う方法
CSSでは要素:hover{}の形式でマウスオーバー時にスタイルを変えられます。
hoverで指定したスタイルはマウスオーバー時のみ適用され、書き変えられるわけではありません。
.hoge-button:hover{opacity:0.5;}
上記のコードでは、CSSで、先程のほげボタンをマウスオーバーしたときのみ、不透明度を50%にして表示させています。
CSSを使わない方法
CSSのhoverを使わずに、マウスオーバー時にスタイルを変えることも可能です。
マウスオーバー時とそうでない時のスタイルをonmouseover属性とonmouseout属性にそれぞれJavaScriptで設定します。
<button style="background-color:orange;padding:5px 20px;" onmouseover="this.style.opacity=0.5;" onmouseout="this.style.opacity=1;">ほげボタン</button>
上記のコードでは、先程のほげボタンをCSSではなく、onmouseover属性とonmouseout属性でJavaScriptを使って、マウスオーバー時のみ、不透明度を50%にして表示させています。