时间戳

首页 > 解决方案 > 导航项目因未知原因闪烁

css - 导航项目因未知原因闪烁

问题描述

我创建了一个带有动画悬停效果的导航菜单，它在悬停的项目下创建了一个移动的下划线。但是当我将鼠标悬停在一个项目上时，菜单的其他项目会“闪烁”，就好像它们稍微偏离了它们的位置然后又回来了。我不知道为什么会这样：这是我的代码：

nav a::before {
content: ' ';
display: block;
height: 3px;
background-color: #fff;
position: absolute;
bottom: -.5rem;
left: 0;
right: 0;
transform: scale(0, 1);
transition: transform ease-in-out 200ms;
}
nav a:hover::before {
transform: scale(1,1);
}

当然这只是代码的一部分，如果你想看更多，请告诉我是哪一部分。我只是不想压倒。

HTML 代码：

<body>
 <header>
     <h1 class="logo">Logo</h1>
     <input type="checkbox" class="nav-toggle" id="nav-toggle">
     <nav>
         <ul>
             <li><a href="">בית</a></li>
             <li><a href="">על החנות</a></li>
             <li><a href="">מפה</a></li>
             <li><a href="">צור קשר</a></li>
         </ul>
     </nav>
     <label for="nav-toggle" class="nav-toggle-label"><span></span></label>
 </header>

非常感谢，奥马尔

标签： cssgridnav

解决方案

推荐阅读