悬停菜单列表出现闪烁的故障

Question

我遇到了这个问题，我想在菜单列表周围创建一个框。但我从未见过这样的事情。当我将鼠标悬停在菜单列表上时它会闪烁吗？ 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;}

有人知道这是为什么吗？我该如何解决这个问题？谢谢

Answer 1

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

只需在正常状态下添加 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/

悬停菜单列表出现闪烁的故障

Glitch flickering with hovering menu list

html

css

jsfiddle