html - CSS伪:element hover effect is not working correctly

Question

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

下面的代码选择了我想在悬停时显示的 .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