【问题标题】:Weird CSS Transition Flickering on hover奇怪的 CSS 过渡在悬停时闪烁
【发布时间】:2017-06-18 19:36:41
【问题描述】:

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

自己看看:

HTML:

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

SCSS:

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

【问题讨论】:

    标签: css hover css-transitions microsoft-edge


    【解决方案1】:

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

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

    【讨论】:

    • 尝试调整悬停的宽度。有时,没有默认宽度的浏览器会做出这种行为。 a:visited a:hover{ width: 17em;背景:#B2CDE0;
    猜你喜欢
    • 2012-04-25
    • 2018-04-20
    • 1970-01-01
    • 2018-05-14
    • 2012-10-12
    • 2013-07-08
    • 2014-04-09
    • 1970-01-01
    • 2020-08-28
    相关资源
    最近更新 更多