Question

当用户滚动到某个金额时，我正在制作一个使用transition: all .6s的CSS菜单。在这个菜单中，我有一个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;
}

一个元素上有两个不同的过渡

1 个答案: