当没有指定高度时，为什么我的图标会在悬停时切断？

Question

在roseannebarr.tumblr.com上，当您将鼠标悬停在我的图标上而不是自然地上升时，即使我没有设定高度，它们也会被切断。我知道我的HTML搞砸了，因为我使用了一百万个ID，但我的页面使用了浏览器错误，所以请忽略它。有什么想法吗？

这可能是最愚蠢的问题。

Answer 1

当你将鼠标悬停在它上面时，你是在谈论被切断的黑色背景吗？你想要包括背景在内的整个图标吗？如果是这样，你应该把：悬停在#outer而不是#block：

#outer:hover {
  margin-top: -10px;
}

不知道这是不是你的意思。如果没有，请告诉我。 ：）

Answer 2

它们没有被切断，您可以通过使用负上边距将图像移到容器外来缩小容器。

一个简单的解决方案是将黑色背景放在#block样式的#outer样式内。这样，图像就会获得背景而不是容器，因此当图像移动而不是随容器收缩时，背景会跟随图像。