HTMLでマウスオーバー時にスタイルを変える方法【現役エンジニアが解説】

PROGRAM

今回は、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%にして表示させています。