Question

I have this problem where I want make a box around a menu list. But I've never seen something like this. When I hover over my menu list it flickers? The jsfiddle has the full-code.

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

Does anyone know why is this? And how can I fix this? Thanks.

Answer 1

闪烁和跳跃是由您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/

Glitch flickering with hovering menu list

1 个答案: