CSS伪造：元素悬停效果无法正常工作

Question

当特定的ease-in-out悬停时，我使用CSS来psudeo:element一些文字。

下面的代码是选择我要在悬停时显示的.description元素的父元素，但悬停效果是在我想要它之前发生的。

.grid-item:hover .description {
    visibility: visible;
    opacity: 1;
  }

当光标位于父元素上方几厘米处时，将触发悬停状态。我相信这可能是这个元素的填充/边距的问题。我尝试了许多没有运气的事情。

这是full code。

轻轻地将鼠标悬停在每张图片上以了解问题。

Answer 1

您只需要更改显示悬停文本的CSS选择器。目前，当.image的父项（即.grid-item）悬停时，会触发该项。相反，如果您将其设置如下，则在包含图像的div悬停时将触发它。

.image:hover + .description {
  visibility: visible;
  opacity: 1;
}

这是更新过的笔：https://codepen.io/anon/pen/WEWmEw?editors=1100

Answer 2

@Jordan Miguel，你是对的。这是填充，以及内容本身。

如果你破解了你选择的浏览器的开发工具（我在图片中使用Chrome），你可能会找到一个工具来显示特定CSS元素的盒子模型。选择元素时，您可以在右侧和左侧看到触发hover的填充。

在工具的左侧窗格中，您可以看到所选元素以及已应用的样式。从这里你可以弄清楚你需要改变什么才能获得你期望的行为。