Weird CSS-Übergang flackert auf Schwebeflug

Question

Ich habe vor kurzem ein 'Problem' im Edge-Browser mit dem folgenden Code festgestellt, der zu einem merkwürdigen Hover-Übergangsverhalten auf Links führt.

ein Nehmen Sie sich aus:

• JSFiddle
• The App I'm working on ('Test' Link)

HTML:

<a><h1>Test</h1></a> 

SCSS:

* { 
    transition: all .15s ease-in; 
} 
a { 
    color: inherit; 
    &:hover { 
    color: blue; 
    } 
} 
h1 { 
    color: black; 
} 

Answer 1

Es scheint, dass Sie nicht die Farbe Zuweisungs folgte. Das seltsame Verhalten könnte mit dieser unsachgemäßen Verwendung in Verbindung gebracht werden. A: Hover muss nach den Regeln A:link und A:visited platziert werden, da sonst die Cascading-Regeln die 'color'-Eigenschaft der A: Hover-Regel verbergen. Da A: active nach A: hover platziert ist, wird die aktive Farbe (lime) angewendet, wenn der Benutzer sowohl das Element A aktiviert als auch darüber schwebt.

link {color: blue;}  
visited {color: purple;} 
hover {color: red;}  
active {color: yellow;}