Question

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

当我悬停时，下面的代码没有任何结果，但是当我将光标移离链接时，该线条会出现一毫秒然后消失。

指南针没有错误，悬停状态暂时起作用然后消失！我已经多次回到这里，但失败了。专业人士请详细说明，请...

代码：

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 Pseudo悬停类无法正常工作（几乎立即消失）

1 个答案: