如何在鼠标悬停时停止摆动（跳跃）列表菜单项？

Question

鼠标悬停时有菜单 li 有点晃动。如何停止摆动。

代码在这里 JSFiddle

Answer 1

如果我没看错，你想消除悬停时的抖动。为此，请删除边框

.inner LI:hover {
    background: #eee;
    -webkit-backface-visibility: hidden;
}

这将是需要更改的代码。如果实在想要border样式，加box-shadow也可以达到同样的效果。

希望对您有所帮助。

Answer 2

摆动属性是因为在 .inner li

上有 :hover 事件时添加了边框

正确 CSS:

.inner LI:hover { background: #eee;  -webkit-backface-visibility: hidden;}

代码已更新： JSFiddle

Answer 3

摆脱它的最简单方法是像这样修改 css：

.inner LI {
  border: 1px solid transparent;
  padding: 0.25em 1.75em;
  font-family: "Open Sans", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 90%;
}

Answer 4

Index.html 中的第 59 行更改自：

    .inner LI:hover 
    { 
      border: 1px solid #ddd; 
      background: #eee; 
      -webkit-backface-visibility: hidden;
    }

至：

    .inner LI:hover 
    { 
      background: #eee; 
      -webkit-backface-visibility: hidden;
    }

Answer 5

在您的 .inner LI:hover class 中，您设置了 border: 1px solid #ddd;。

但是，你的.inner LIclass没有边框，或者'a border of 0px'。

要补救这种情况，请尝试将 border: 1px solid transparent; 添加到您的 .inner LI class。

如何在鼠标悬停时停止摆动（跳跃）列表菜单项？

how to stop wiggling (jumping) list menu item on mouse over?

css

user-interface

border