SASS 伪悬停类不起作用（几乎立即消失）答案

【问题标题】：SASS Pseudo hover class not working (disappears almost instantly)SASS 伪悬停类不起作用（几乎立即消失）
【发布时间】：2016-03-17 20:58:52
【问题描述】：

我的目标是创建一个简单的悬停状态，在导航链接下方出现一条橙色线。

使用下面的代码，当我悬停时我什么也得不到，但是当我将光标从链接上移开时，该行会出现一毫秒然后消失。

指南针没有错误，悬停状态暂时有效，然后消失！我已经多次回到这个问题，但都失败了。请专业人士解释一下，请...

代码：

nav {
    @include make-row();
    @include make-sm-column(12);

    .main-nav {
        float: right;
        list-style: none;

        li {
            display: inline-block;
            margin-left: 40px;
            margin-top: 55px;

            a {
                &:link,
                &:visited {
                    padding: 8px 0;
                    color: #fff;
                    text-decoration: none;
                    text-transform: uppercase;
                    font-size: 0.9em;
                    border-bottom: 2px solid transparent;
                    transition: border-bottom 0.8s;
                }
                &:hover,
                &:active {
                    border-bottom: 2px $seconday-color;
                }
            }
        }
    }
}

反复无常。

【问题讨论】：

除非你有 Sass->CSS 编译问题，只发布编译后的 CSS。这不是 Sass 问题。

标签： class hyperlink sass hover state

【解决方案1】：

而不是transition: border-bottom 使用transition: border-color，然后在&:hoover 状态下，您只需要border-color: $seconday-color;。

jsFiddle：http://jsfiddle.net/oxunwt4g/

【讨论】：