导航栏上的悬停移动问题

Issue with hover movement on navigation bar

本文关键字：移动 问题 悬停 导航      更新时间：2023-09-26

我正在为我的投资组合开发一个虚构的网站，并且被困在为什么悬停移动单词。每次我将鼠标悬停在单词上时，它都会移动。

这是代码：

 nav{
 position:fixed;
 z-index:1000;
 top:0;
 bottom:0;
 width:150px;
 background-color:black;
 color:white; 
 line-height:60px;
  }
 nav a{
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.3s;
  }

  nav ul{
 list-style-type:none; 
 margin-top:100px;
 text-align:center;}
  nav ul li a{
   text-decoration: none;
   display:inline-block;
   text-align:center;
   color:#fff;
    }
 nav a:hover {
 background-color: #EBEBEB;
 color: black;
 margin: 0.5em 0;
 display:block;
 cursor:pointer;
 }
 nav a: hover: after{
                 text-decoration: none;
                 display:inline-block;
                 text-align:center;
                 color:#fff;
                  }

我非常感谢任何反馈。

导航 A：悬停 { 背景颜色： #EBEBEB; 颜色：黑色; 边缘： 0.5em 0; 显示：块; 光标：指针; }

更改边距时，元素将移动。将其更改为margin:0; 

 nav a:hover {
    background-color: #EBEBEB;
    color: black;
    margin: 0;
    display:block;
    cursor:pointer;
 }

如果您希望在不破坏布局的情况下发生某种移动效果，您可以尝试使用position:relative和top:0.5em

相关文章：