修复由于滚动条隐藏在 Chrome 中的 CSS 宽度动画问题

Question

当我在我的部分上使用 hover 时，我的导航栏上有 animation，但是当我将滚动条隐藏在 Chrome 中时，右侧元素的 animation 坏了。 当我 hover 时，有一条宽度 go 为 100%，不悬停时为 0%。 但是即使在我离开之后，联系部分的栏仍然存在。

这是问题的2张图片：

在最后一张图片中看到它仍然存在。

编码：

HTML（在身体标签上）：

 * { margin: 0; padding: 0; } html { scrollbar-width: none; /* Firfox scroll hiding*/ scroll-behavior: smooth; } body{ margin: 0px; font-family: 'Roboto', sans-serif; background-color: #e6e6eb; -ms-overflow-style: none; /* IE and Edge scrollbar hiding*/ } body::-webkit-scrollbar { /* Chrome scroll hiding*/ display: none; } /*This is to ensure that the navigation navigate to the correct element*/.anchor-offset{ display: block; height: 80px; /*same height as header*/ margin-top: -70px; /*same height as header*/ visibility: hidden; } /*navbar ======================================*/.nav-container { width: 80%; margin: 0 auto; } header { background: #202124; position: fixed; width: 100%; top: 0; z-index: 999; } header::after { content: ''; display: table; clear: both; }.nav-logo { float: left; height: 60px; margin: 8px; border-radius: 10px; } nav { float: right; } nav ul { margin: 0; padding 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 23px; position: relative; } nav a { color: aliceblue; text-decoration: none; text-transform: uppercase; font-size: 20px; font-weight: bold; } nav a:hover { color: azure; } nav a::before { content: ''; display: block; height: 5px; background-color: aliceblue; position: absolute; top: 10px; width: 0px; transition: all ease-in-out 250ms; } nav a:hover::before { width: 100%; } nav div:hover { color: azure; } nav div::before { content: ''; display: block; height: 5px; background-color: aliceblue; position: absolute; top: 0; width: 0px; transition: all ease-in-out 250ms; } nav div:hover::before { width: 100%; }

 <header> <div class="nav-container"> <img src="Images/YourLogo.PNG" alt="logo" class="nav-logo"> <nav> <ul> <li> <a href="#Home">Home</a></li> <li> <a href="#About">About</a></li> <li> <a href="#Gallery">Gallery</a></li> <li> <a href="#Menu">Menu</a></li> <li> <a href="#Testimonials">Testimonials</a></li> <li> <a href="#Contact">Contact</a></li> </ul> </nav> </div> </header>

我将如何解决这个问题？ 先感谢您。

Answer 1

 * { margin: 0; padding: 0; } html { scrollbar-width: none; /* Firfox scroll hiding*/ scroll-behavior: smooth; } body{ margin: 0px; font-family: 'Roboto', sans-serif; background-color: #e6e6eb; -ms-overflow-style: none; /* IE and Edge scrollbar hiding*/ } body::-webkit-scrollbar { /* Chrome scroll hiding*/ display: none; } /*This is to ensure that the navigation navigate to the correct element*/.anchor-offset{ display: block; height: 80px; /*same height as header*/ margin-top: -70px; /*same height as header*/ visibility: hidden; } /*navbar ======================================*/.nav-container { width: 80%; margin: 0 auto; } header { background: #202124; position: fixed; width: 100%; top: 0; z-index: 999; } header::after { content: ''; display: table; clear: both; }.nav-logo { float: left; height: 60px; margin: 8px; border-radius: 10px; } nav { float: right; } nav ul { margin: 0; padding 0; list-style: none; } nav li { display: inline-block; margin-left: 70px; padding-top: 23px; position: relative; } nav a { color: aliceblue; text-decoration: none; text-transform: uppercase; font-size: 20px; font-weight: bold; } nav a:hover { color: azure; } nav a::before { content: ''; display: block; height: 5px; opacity: 0; background-color: aliceblue; position: absolute; top: 10px; width: 0px; transition: opacity.01s linear, width ease-in-out 250ms; } nav a:hover::before { width: 100%; opacity: 1; } nav div:hover { color: azure; } nav div::before { content: ''; display: block; height: 5px; background-color: aliceblue; position: absolute; top: 0; width: 0px; transition: all ease-in-out 250ms; } nav div:hover::before { width: 100%; }

 <header> <div class="nav-container"> <img src="Images/YourLogo.PNG" alt="logo" class="nav-logo"> <nav> <ul> <li> <a href="#Home">Home</a></li> <li> <a href="#About">About</a></li> <li> <a href="#Gallery">Gallery</a></li> <li> <a href="#Menu">Menu</a></li> <li> <a href="#Testimonials">Testimonials</a></li> <li> <a href="#Contact">Contact</a></li> </ul> </nav> </div> </header>

Answer 2

我通过添加从右侧而不是左侧进行命名来修复它

nav a::before {
    content: '';
    display: block; 
    height: 5px;
    
    background-color: aliceblue;
    
    position: absolute;
    top: 10px;
    width: 0px;
    right: 0px;   *<- Add this*
    transition: all ease-in-out 250ms;
}