CSS 在悬停时缩小

Posted 2023-03-06

【中文标题】CSS 在悬停时缩小

【英文标题】：CSS shrink on hover

【发布时间】：2012-06-23 19:03:09

【问题描述】：

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

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

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

【参考方案1】：

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

而不是magin-top:5px;

做border-top:5px solid black;

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

【参考方案2】：

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

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

【讨论】：

如果我改用填充，则框不会缩小。这就是我的目标。

是的，要保持这种效果，您需要进行一些更改。一种解决方案是创建一个具有背景和应该向下移动的文本的新容器。悬停样式仍应应用于整个 li。有意义吗？

【参考方案3】：

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

【讨论】：

jsfiddle.net/gANfS/15 我试过了，还是不行。不过我可能做错了吗？

好吧，我的尝试可能有点运气，因为您的实现与我的很接近。无论如何，PTBG 的解决方案是更好的解决方案。