jquery - 一个元素上的两种不同的过渡

Question

我正在使用 CSS 制作一个菜单，当用户滚动到某个数量时，该菜单使用 transition: all .6s。在此菜单中，我有一个 ul，我想在悬停时使用淡入淡出过渡。可悲的是，当用户滚动时，这会弄乱一切，重新定位效果会延迟。 Example

问题是；我该如何解决这个问题？

滚动时过渡的 CSS:

.menu, nav, img {
    transition: all .6s;
    -moz-transition: all .6s;
    -o-transition: all .6s;
    -webkit-transition: all .6s;
}

我想要悬停的按钮:

nav ul li a {
    color: rgba(0,0,0,.7);
    font-family: dinot;
    font-weight: 100;
    text-transform: uppercase;
    text-decoration: none;
    transition: ease-in-out .2s;
}

HTML:

<div class="menu">
    <nav>
        <a href=""><img src="style/img/logo.png" alt="logo"></a>
        <ul>
            <li><a href="">Hem</a></li>
            <li><a href="">Om oss</a></li>
            <li><a href="">Tjänster</a></li>
            <li><a href="">projekt</a></li>
            <li><a href="">kontakt</a></li>
        </ul>
    </nav>
</div>

Answer 1

您需要为 a 标签指定转换类型。这是修复:

nav ul li a {
    color: rgba(0,0,0,.7);
    font-family: dinot;
    font-weight: 100;
    text-transform: uppercase;
    text-decoration: none;
    transition: color ease-in-out .2s;
}