CSSの「hover」と「active」の順序

ボタン押下時のスタイルでどうも上手くいかなかったので調べて見ると

hoverはactiveよりも先に記述しなきゃいけないことが判明!
知らなかった・・・(--;

【順序】
① hover
② active

理由は、hoverをactiveより後に書くとhoverのスタイルでactionが上書き
されてしまうからです。
例えば、
① active:フォント色を「赤」に設定
② hover:フォント色を「青」に設定

このスタイルをリンクに適用すると
マウスのカーソルが当たったときには②のhoverで設定した「青」になり
次にリンクを押下すると①で設定した「赤」にはならず②「青」の青のままになります。

・・・1時間もはまってしまいました。

今回、参考にさせていただいたサイトは下記です。
詳細に説明が書かれてあるので、ぜひ参考にしてみて下さい。
:link、:visited、:hover、:active擬似クラス

コメント

人気の投稿