Question

我正在为我的投资组合工作一个虚构的网站，并且我坚持为什么悬停正在移动这些话。每当我将鼠标悬停在单词上时它就会移动。

以下是代码：

 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;
                  }

我真的很感激任何反馈。

Answer 1

nav a：hover {background-color：#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

导航栏上的悬停移动问题

1 个答案: