SASS 伪悬停 class 无效（几乎立即消失）

Question

我的 objective 是创建一个简单的悬停状态，其中橙色线出现在导航下方 link。

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

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

代码：

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;
                }
            }
        }
    }
}

完了。

Answer 1

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

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

SASS 伪悬停 class 无效（几乎立即消失）

SASS Pseudo hover class not working (disappears almost instantly)

state

class

sass

hyperlink

hover