style属性に:hoverを指定することはできないと断言。だが他の策がある。

htmlのstyle属性に:hoverを指定することはできないと断言する記事を書いておきます。※styleタグじゃなくてstyle属性の話なので注意してください。

htmlのstyle属性に:hoverを指定することはできない

ネットの情報を検索するとstyle属性に:hoverが書けるという情報があります。例えば以下のようなもの

<a style=”:hover{color: red}; href=”#”>hello</a>
↑↑↑これ動きませんからお気をつけて↑↑↑

style属性に:hoverは指定できない → じゃあ打開策は。

style属性に:hoverは指定できません。しかし打開策があります。その方法が以下です。

  • onmouseover属性を使う
  • onmouseout属性を使う

以下がonmouseoverとonmouseoutを使ったコードです。

<a href="" style="display: block; background: #eee; border: solid 1px #ccc; padding: 13px; width: 50%; margin: 0 auto; text-align: center; transition: background 1s, transform 1s;" onmouseover="this.style.transform='translatey(5px)';this.style.background='#ccc'" onmouseout="this.style.transform='translatey(-5px)';this.style.background='#eee'">onmouseover/onmouseoutテスト</a>

ひどいコードだと思わずによく見てください。デモというかはわかりませんが、以下のような動きになります。

onmouseover/onmouseoutテスト

onmouseoverとonmouseoutのはまりポイント

仕組みを理解しておく

onmouseoverを使うとどういうことがおきるのか理解しておく必要があります。onmouseoverの場合、マウスが要素にのると、指定したstyleがstyle属性に記述されます。この一連のながれはあまり重要ではありませんが、どういう仕組みで動いているのか理解しておいたほうがいいかとは思います。要素の検証でソースをみてみればどんな動きをしているかがわかります。

onmouseoutで離れたときは、style属性の中に同じcssプロパティがあればそれが上書きされます。

onmouseoverに複数のstyleを適用したいときは

onmouseoverで複数のstyleを適用したいときは ;(セミコロン)で区切る必要があります。

onmouseover=”this.style.color=’red’; this.style.background=’blue'”

上記のような要領で書きます。

まとめ

昔はstyle属性に:hoverを指定することができたのかもしれませんが今はできません。しかしonmouseover属性onmouseout属性を使用することにより、style属性のみでstyle属性の値を変えることができます。ちょっとわかりにくい言い回しになった気もしますが間違ったことは書いてないはずです。

※ここに書いてあることはすべて個人的な見解になります。この記事の情報は以上です。