悬停时的CSS缩小

Question

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

这是我到目前为止有：http://jsfiddle.net/gANfS/6/

的问题是，如果你的鼠标在5像素内缘顶部边缘，它开始变得疯狂，悬停和unhovered状态，因为之间来回块的大小增长和缩小。我怎样才能解决这个问题？当我收缩李时，我不想缩小悬停区域。这将解决它，但我不知道如何把它关闭。想法？

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