CSS psuedo:元素悬停效果无法正常工作
问题描述:
我正在使用CSS到ease-in-out
某些文本,当某个特定的psudeo:element
处于悬停状态时。CSS psuedo:元素悬停效果无法正常工作
下面的代码选择我想要在悬停时显示的.description
元素的父代,但悬停效果在我想要之前发生。
.grid-item:hover .description {
visibility: visible;
opacity: 1;
}
当光标位于父元素上方几厘米处时,会触发悬停状态。我相信这可能是这个元素的填充/边距问题。我尝试了许多事情,但没有运气。
这里是full code。
轻轻地将每个图像稍微盘旋一下以理解问题。
答
您只需更改显示悬停文本的CSS选择器。目前,当.image
的母公司(即.grid-item
)被徘徊时,它被触发。相反,如果您将其设置为如下所示,则当包含图像的div悬停时将会触发它。
.image:hover + .description {
visibility: visible;
opacity: 1;
}
是的,我实际上做过之前我问这个问题,玩填充/保证金没有奏效。正确答案如下。 –