Html CSS仅在垂直鼠标上悬停抖动

我已经参考了这些类似的问题，但找不到解决问题的方法

我有一个简单的播放按钮和半透明的div转换，当鼠标悬停在图像上方的块级链接上时

问题在于，在图像上垂直移动鼠标时，divs会抖动

此行为有两个例外（在这种情况下，转换和div行为可以顺利运行）：

垂直移动光标并与之平行

并在div上水平移动鼠标

/*----媒体播放按钮-------*/
vThumb先生{
位置：相对位置；
宽度：100%；
高度：自动；
字号：0；
}
.vThumb img{
位置：相对位置；
宽度：100%；
显示：块；
z指数：-1；
不透明度：.5；
}
.vtumb a{
位置：绝对位置；
排名：0；
显示：块；
宽度：100%；
身高：100%；
文本对齐：居中；
文字装饰：无；
}
.vtumb.演奏，
vtumb a.vOverlay{
不透明度：0；
}
悬停。玩{
位置：相对位置；
字体大小：14vw；
颜色：#f00；
最高：50%；
转化：translateY（-50%）；
z指数：1001；
不透明度：.95；
边界：无；
显示：块；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.vtumb a:悬停~.vOverlay{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
背景色：#f00；
不透明度：.3；
z指数：1000；
显示：内联块；
过渡：不透明度。15秒缓进缓出；
-moz过渡：不透明度。15秒缓进缓出；
-webkit过渡：不透明度。15秒易入易出；
}
/*-------结束媒体播放按钮------*/

---

您看到闪烁的原因是选择器

。vThumb a:hover~。vOverlay

将鼠标悬停在上一个

元素上时，您仅将样式应用于
.vOverlay
元素。当
.vOverlay
元素出现时，它位于
a
元素上方（这意味着您不再将鼠标悬停在
a
元素上方），导致它消失并再次重复

您可以在将鼠标悬停在
.vOverlay
上时应用样式（而不是仅在将鼠标悬停在
a
元素上时应用样式），从而轻松防止出现这种情况

换句话说，您需要以下内容：

.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
    /* ... */
}

但是，这将导致播放按钮不可见（因为您也不再将鼠标悬停在
a
元素上）

您可以通过将选择器
.vThumb a:hover.play
更改为
.vThumb:hover.play
来解决此问题

更新示例：


.vThumb{
位置：相对位置；
宽度：100%；
高度：自动；
字号：0；
}
.vThumb img{
位置：相对位置；
宽度：100%；
显示：块；
z指数：-1；
不透明度：.5；
}
.vtumb a{
位置：绝对位置；
排名：0；
显示：块；
宽度：100%；
身高：100%；
文本对齐：居中；
文字装饰：无；
}
.vtumb.演奏，
vtumb a.vOverlay{
不透明度：0；
}
.vThumb:悬停。播放{
位置：相对位置；
字体大小：14vw；
颜色：#f00；
最高：50%；
转化：translateY（-50%）；
z指数：1001；
不透明度：.95；
边界：无；
显示：块；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.vtumb a:悬停~.vOverlay，
沃弗雷：悬停{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
背景色：#f00；
不透明度：.3；
z指数：1000；
显示：内联块；
过渡：不透明度。15秒缓进缓出；
-moz过渡：不透明度。15秒缓进缓出；
-webkit过渡：不透明度。15秒易入易出；
}
您看到闪烁的原因是选择器
。vThumb a:hover~。vOverlay

将鼠标悬停在上一个
元素上时，您仅将样式应用于
.vOverlay
元素。当
.vOverlay
元素出现时，它位于
a
元素上方（这意味着您不再将鼠标悬停在
a
元素上方），导致它消失并再次重复

您可以在将鼠标悬停在
.vOverlay
上时应用样式（而不是仅在将鼠标悬停在
a
元素上时应用样式），从而轻松防止出现这种情况

换句话说，您需要以下内容：

.vThumb a:hover ~ .vOverlay,
.vOverlay:hover {
    /* ... */
}

但是，这将导致播放按钮不可见（因为您也不再将鼠标悬停在
a
元素上）

您可以通过将选择器
.vThumb a:hover.play
更改为
.vThumb:hover.play
来解决此问题

更新示例：


.vThumb{
位置：相对位置；
宽度：100%；
高度：自动；
字号：0；
}
.vThumb img{
位置：相对位置；
宽度：100%；
显示：块；
z指数：-1；
不透明度：.5；
}
.vtumb a{
位置：绝对位置；
排名：0；
显示：块；
宽度：100%；
身高：100%；
文本对齐：居中；
文字装饰：无；
}
.vtumb.演奏，
vtumb a.vOverlay{
不透明度：0；
}
.vThumb:悬停。播放{
位置：相对位置；
字体大小：14vw；
颜色：#f00；
最高：50%；
转化：translateY（-50%）；
z指数：1001；
不透明度：.95；
边界：无；
显示：块；
过渡：不透明度。25秒缓进缓出；
-moz过渡：不透明度。25秒缓进缓出；
-webkit过渡：不透明度。25秒易入易出；
}
.vtumb a:悬停~.vOverlay，
沃弗雷：悬停{
位置：绝对位置；
排名：0；
宽度：100%；
身高：100%；
背景色：#f00；
不透明度：.3；
z指数：1000；
显示：内联块；
过渡：不透明度。15秒缓进缓出；
-moz过渡：不透明度。15秒缓进缓出；
-webkit过渡：不透明度。15秒易入易出；
}

这就是答案，解释得很好。谢谢你发邮件