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

Question

我正在使用CSS到ease-in-out某些文本，当某个特定的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米格尔，你是对的。这是填充，以及内容本身。

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

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