html - CSS 在悬停时缩小

Question

我正在使用<ul>/<li>和 CSS 制作菜单。

这是我到目前为止所拥有的：https ://jsfiddle.net/gANfS/6/

问题是，如果您将鼠标悬停在 5 像素边距内的顶部边缘上，它会开始变得疯狂并在悬停和未悬停状态之间来回移动，因为块的大小会增大和缩小。我怎样才能解决这个问题？当我缩小 li 时，我不想缩小悬停区域。那会解决它，但我不知道如何把它拉下来。想法？

Answer 1

这是一个黑客工作......但它会工作

代替magin-top:5px;

做border-top:5px solid black;

如果您希望背景颜色不同，只需确保将边框颜色设置为相同颜色即可。

Answer 2

将您的内容包装li到一个 div 中，然后将您的收缩应用到该 div （.sel div:hover而不是li:hover），这应该可以。

Answer 3

原因是鼠标悬停时，按钮向下移动并设置一个margin-top 5px. 然后，如果鼠标位于该顶部边缘，则按钮不再具有“悬停”状态并缩回。当它返回时，它切换到鼠标悬停状态，旅程再次开始。

您可以使用padding-top:5px代替margin-top并在整个容器上设置 HOVER 效果。与边距相反，填充是元素内部的空间。这样，当鼠标在上边缘上时，它仍然会被认为是在元素上，它不会再闪烁了。