2017-07-07 11 views
-1

このページのリンクのスタイリングに取り組んでいたので、component-headerホバーイベントがトリガーしていないことに気付きました。私はシークレットモードでページを開き、リンク:hoverのスタイリングがレンダリングされました。リンクをクリックするとホバーイベントを無効にする必要がありますか?

ブラウザ(ChromeとFirefoxの両方)は、特定のリンク(新しいタブであるかどうかにかかわらず)にアクセスしたことを覚えています。その後、ブラウザはホバーイベントをトリガーしません。

リンクが訪問されたかどうかに関係なく、そのイベントがトリガーされることを期待していました。私はリンクが訪問されたら:visitedスタイルが表示されることを期待しますが、マウスが動くと、私は当然、:hoverスタイルがトリガーされることを期待しています。

私はこのためにChromeにbug reportを提出しました。私はそれをフォローアップするべきかどうか、または現在の動作が正当な理由のために存在するかどうか疑問に思っていますか?

@kapreskiが提供する巧妙なヒントは非常に簡単ですが、疑似セレクタの正しい順序を覚えておく必要はないようです。

答えて

1

:visitedルールを訪問した後、:hoverが「:visited」の前にある場合は、:hoverルールを上書きします。いずれにしても

:hover作品、それはCSSファイルで:visitedルールの後に来る場合、または:hover!important句を持っている場合。

+0

ああを考え、少し簡単に4つのセレクタの順番を覚えて作る受け入れ答えにヒントを追加する - 依存ソース順 - 良いアイ - ありがとう。私はコンポーネントのデザインを更新し、クリックの前後でレンダリングします。 – Ole

1

ただ単に「愛(LV)嫌い(HA)」

a:link 
    a:visited 
    a:hover 
    a:active 
関連する問題