Question

当我将鼠标悬停在链接上时，如何阻止我的链接“碰撞”？

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>

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

Answer 2

您可以通过在li上实际使用边框来添加边框，但将其设置为透明。将鼠标悬停时的边框颜色更改为黑色。

ul {
    position: absolute;
    bottom: 4px;
    margin: 0px;
    left: 0px;
}

li {
    border-bottom:2px solid transparent
}

li:hover {
    border-color:black
}

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

在悬停时停止链接'bump'

2 个答案: