htmlで要素にマウスが乗った時・離れた時に変更を加える方法/onmouseover・onmouseoutプロパティの使い方

mouse IT

今これを使っているWebサイトはほぼないでしょうが、htmlでもこういう動的なことができるんだなあ、という発見があったので書いておきます。非推奨技術です。

Advertisements

onmouseoverの使い方

使い方としてはidとかclassとかと同じように、htmlの中で指定します。

マウスが乗った時の変化を指定
onmouseover = “変化内容”
マウスが離れた時の変化を指定
onmouseout = “変化内容”

実際に作ると、こんな感じのものになります。

Hover me!

<span onmouseover = "this.style.fontStyle='italic'" onmouseout = "this.style.fontStyle=''">Hover me!</span>

いつまでこのコードがちゃんと動くかは怪しいものですが、2019年のGoogle Chromeではちゃんと動いてます。リンクとかにしれっと仕込むには手軽でいいかもしれないですね。

HTMLの便利な使い方・タグ逆引きリファレンス
ウェブページ作成言語として常に熱い需要を持つHTML関連のまとめページです。 勉強しながらちょっとずつ増やしていく所存です。

コメント