奇怪的 CSS 过渡在悬停时闪烁

Question

我最近使用以下代码在边缘浏览器中遇到了一个“问题”，导致链接上出现奇怪的悬停过渡行为。

自己看看：

• 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

您似乎没有遵循颜色分配。奇怪的行为可能与这种不当使用有关。 A:hover 必须放在 A:link 和 A:visited 规则之后，否则级联规则将隐藏 A:hover 规则的 'color' 属性。同样，因为 A:active 放置在 A:hover 之后，所以当用户激活并将鼠标悬停在 A 元素上时，将应用活动颜色（石灰）。

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