html - 悬停时停止链接 'bump'

Question

当我将鼠标悬停在链接上时，如何防止链接“弹出”？

http://jsfiddle.net/s9147kqe/

ul {
    position: absolute;
    bottom: 4px;
    margin: 0px;
    left: 0px;
}

li:hover {
    border-bottom:2px solid black
}

<ul>
    <li><a href="#">Test</a></li>
</ul>
  

Answer 1

只需将 margin-bottom:-2px; 添加到 li:hover 即可。

ul {
    position: absolute;
    bottom: 4px;
    margin: 0px;
    left: 0px;
}

li:hover {
    border-bottom:2px solid black;
    margin-bottom:-2px;
}

<ul>
    <li><a href="#">Test</a></li>
</ul>
  

简短说明:
元素的边框被添加到元素内部。现在内容随着边框的粗细向上移动。边框就像一个“可见的填充”。要向下移动元素，我们必须删除具有边框厚度的边距。