CSS悬停时缩小

Question

我正在制作一个带有ul / li和CSS的菜单。

以下是我到目前为止的内容：http://jsfiddle.net/gANfS/6/

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

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效果。与边距相反，填充是元素内部的空间。这样，当鼠标位于顶部边缘时，它仍将被视为在元素上方，并且不会再闪烁。