html - 菜单列表悬停时出现小故障

我在要在菜单列表周围打一个框的地方遇到了这个问题。但是我从未见过这样的事情。当我将鼠标悬停在菜单列表上时，它会闪烁吗？ jsfiddle具有完整代码。

Here is the link to jsfiddle

li {
  display: inline-block;

    position:relative;
    line-height: 7vmax;
    vertical-align: middle;
 }



ul li a {color:rgb(23,123,177);text-decoration: none;margin-left:5vmax;font-size:1.3vmax;}

a:hover { background-color: #2c3e50;
  padding: 1vmax;}

有人知道这是为什么吗？我该如何解决呢？谢谢。

最佳答案

闪烁和跳跃是由您在padding上添加的hover引起的。

只需在正常状态下添加padding即可，如下所示：

ul li a {
  color:rgb(23,123,177);
  text-decoration: none;
  margin-left:5vmax;
  font-size:1.3vmax;
  padding: 1vmax; // add it here
}

a:hover {
  background-color: #2c3e50;
  // remove it here
}

我已经创建了您的代码分支并对其进行了更新：
https://jsfiddle.net/7jsf9o2t/1/

关于html - 菜单列表悬停时出现小故障，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/49949998/