CSSの「hover」と「active」の順序
ボタン押下時のスタイルでどうも上手くいかなかったので調べて見ると
hoverはactiveよりも先に記述しなきゃいけないことが判明!
知らなかった・・・(--;
【順序】
① hover
② active
理由は、hoverをactiveより後に書くとhoverのスタイルでactionが上書き
されてしまうからです。
例えば、
① active:フォント色を「赤」に設定
② hover:フォント色を「青」に設定
このスタイルをリンクに適用すると
マウスのカーソルが当たったときには②のhoverで設定した「青」になり
次にリンクを押下すると①で設定した「赤」にはならず②「青」の青のままになります。
・・・1時間もはまってしまいました。
今回、参考にさせていただいたサイトは下記です。
詳細に説明が書かれてあるので、ぜひ参考にしてみて下さい。
:link、:visited、:hover、:active擬似クラス
hoverはactiveよりも先に記述しなきゃいけないことが判明!
知らなかった・・・(--;
【順序】
① hover
② active
理由は、hoverをactiveより後に書くとhoverのスタイルでactionが上書き
されてしまうからです。
例えば、
① active:フォント色を「赤」に設定
② hover:フォント色を「青」に設定
このスタイルをリンクに適用すると
マウスのカーソルが当たったときには②のhoverで設定した「青」になり
次にリンクを押下すると①で設定した「赤」にはならず②「青」の青のままになります。
・・・1時間もはまってしまいました。
今回、参考にさせていただいたサイトは下記です。
詳細に説明が書かれてあるので、ぜひ参考にしてみて下さい。
:link、:visited、:hover、:active擬似クラス
コメント
コメントを投稿