CSS在视频播放的时候覆盖在视频上面的hover回闪动不断触发
发布网友
发布时间：2022-04-26 18:15
共2个回答
懂视网
时间：2022-05-14 06:52
具体代码如下所示：
<p id="p2"></p> <p id="p3"> <p>你好</p> </p>
这是html代码部分，原本想做一个遮盖罩的效果，当鼠标移动到p2的时候，p3会出现微微遮一下p2.
所以最开始的css代码是这样的
做完后发现出了一个问题，那就是鼠标移动到p2的时候p3会不停的闪烁。这并不是我想要的效果，于是我去找了很多资料，终于找到了原因
原来，当鼠标移动到p2的时候，p3会出现，这样鼠标就会在p3上，而不是在p2上面。于是p2又会消失，如此反复。
解决方法也很简单，将p2:hover代码换成如下就能完美解决了。
最终效果如下
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
hover选择器如何使用
CSS做出图片背景填充的六边形
热心网友
时间：2022-05-14 04:00
这个是一些特性吧，有可能是视频播放的时候的层叠问题。。
自己是使用onmouseover配合onmouseout解决的，可以不修改css的样式修改选择器就足够了，例如鼠标浮动是更改class+=active，那么CSS就是；
sth.active {//原来hover的样式
}
然后Javascript就是；
var a= document.querySelector('css选择器，使用#id，不然会是一个数组..');a.addEventListener('mouseover',function(){this.classList.add('active');});
a.addEventListener('mouseout',function(){this.classList.remove('active');})
主要还是冒泡的问题
