解决css中hover做遮盖罩闪动问题

最新推荐文章于 2024-03-23 01:03:32 发布
最新推荐文章于 2024-03-23 01:03:32 发布
阅读量7.2k 收藏 4
点赞数 4
分类专栏： css效果 文章标签： css hover
<div id="div2"></div>
<div id="div3">
<p>你好</p>

</div>

这是html代码部分，原本想做一个遮盖罩的效果，当鼠标移动到div2的时候，div3会出现微微遮一下div2.

所以最开始的css代码是这样的



做完后发现出了一个问题，那就是鼠标移动到div2的时候div3会不停的闪烁。这并不是我想要的效果，于是我去找了很多资料，终于找到了原因

原来，当鼠标移动到div2的时候，div3会出现，这样鼠标就会在div3上，而不是在div2上面。于是div2又会消失，如此反复。

解决方法也很简单，将div2:hover代码换成如下就能完美解决了。


最终效果如下

                                          

qq_37542501
关注
  • 4
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决css中hover做遮盖罩闪动问题(推荐)
09-24
主要介绍了解决css中hover做遮盖罩闪动问题的相关知识,需要的朋友可以参考下
css样式hover图片闪烁问题
aaztliz78857的博客
03-22 854
主要是ie8及ie8以下版本浏览器会出现此问题, 问题核心是因为hover选择器没有缓存即将要替换的图片, 所以导致替换期间有一个极其短暂的空白期. 解决方案: 采用 background-position 的方式, 可缓解此问题. 但是低版本内核的浏览器在鼠标移动过快时, 仍然可以略微看到痕迹. 转载于:https://www.cnblogs.com/jiyang2008/p/5...
web前端之实现酷炫的仪表进度条、JavaScript动态设置css属性值、标签元素属性选择器、hsl样式函数
最新发布
“代码农”微信公众号
03-23 1204
web前端之实现酷炫的仪表进度条、JavaScript动态设置css属性值、标签元素属性选择器、hsl样式函数
关于css hover动效边缘触发频繁闪动的解决方案
黄治文的博客
09-10 5880
问题描述 最近做一个官网，里面的动效比较多，也遇到了很多问题。便一点点的收录下来。今天遇到的问题如下图 当鼠标触发到边缘时，就会频繁切换hover 和 非hover状态，就出现了如图的一上一下的局面 问题解决 既然知道了是怎样出现了，那就好解决了。因为直接在需要改变位置的元素加hover属性，在触发边缘时，元素就发生向上的的位置变化，然后鼠标就和元素没有接触了，就时非hover属性，元素位置要还原，然后又接触到鼠标，变成了hover属性。如此循环就会不停闪动，用户体验很差。 解决方案就是将hover属性放
Jquery：解决鼠标移入移出多次触发的问题
qq_42961150的博客
09-27 3418
jq的鼠标移入移除事件： mouseover()鼠标移入（移入子元素也触发） mouseout()鼠标移出（离开子元素也触发） mouseenter()鼠标移入（移入子元素不触发） mouseleave()鼠标移出（离开子元素不触发） hover()鼠标移入移出（mouseenter与mouseleave的缩写） 示例代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <
鼠标经过弹出遮罩层闪烁问题
weixin_34049948的博客
11-30 400
问题：鼠标经过弹出遮罩层，但会一直闪烁 解决：在弹出遮罩层的 CSS 里加上pointer-events: none; 转载于:https://www.cnblogs.com/bagnliu/p/7929887.html
mouseover等闪烁问题
weixin_30251587的博客
07-06 147
在使用mouseover等鼠标事件时如移动上去灰色的遮罩层高度从0到100% 在操作中发现鼠标一直在图里面但遮罩会一直变化，我感觉应该是遮罩层出现后导致鼠标离开了底层图片所以会一直变化。想起之前用的 给遮罩层添加 pointer-events: none;在这试了一下，发现还是有效果的；这是用来阻止元素上的事件的。使用了这个，在该元素上进行任何JS操作等都会失效，主要用在SVG上，网上很多说...
解决Dreamweaver中关于应用CSS的小问题
09-24
由于DW的功能之强大，所以可以在他里面直接定义css（样式表），而就是这css给我出了个小难题。　事情是这样的， 我用css主要是改变一下我的超级连接的颜色和下划线的有无。在DW里定义css的确很方
csshover.htc可以解决ie6下hover不起作用等兼容问题
12-13
在ie6 下只有a 才支持:hover 伪类，其它标签都不支持，现在可以通过 csshover.htc 可以解决 ie6 的 hover 兼容问题。 它利用 javascript 脚本来给元素的的样式定义，如果检测到 hover 定义，就给元素设置 ...
链接伪类（:hover）CSS背景图片有闪动BUG的解决方法
12-01
例如： CSS代码 a:hover{background:url(imagepath)} 常用的解决方案： 在页面底部添加以下IE6专用代码，让IE6缓存CSS背景图片至本地，这样a:hover时IE6就不会再重新向服务器请求加载背景图片了。 XML/HTML代码 ...
css3新属性：pointer-events:none解决鼠标进入闪烁问题
weixin_43540912的博客
12-06 1105
在实现一个侧边栏的小导航，鼠标经过导航出现对应内容块，可在鼠标停留在导航里面显示层就一直闪烁，应该是在鼠标进入后移动到子级触发的事件冒泡导致的，查了很多解决方法，都看不懂…，直到看到了pointer-events。 pointer-events:none解决鼠标经过闪烁问题 给目标元素添加上pointer-events:none属性 pointer-events:none属性 的作用：添加上该属性...
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
10-20
下面小编就为大家带来一篇jquery hover 不停闪动问题的解决方法(亦为stop()的使用)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
使用hover时，鼠标放在上面移动时会不停的触发和闪动
qq_43484520的博客
10-27 2006
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 鼠标移入div1的时候显示div2的内容，移出时 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析..
鼠标移入显示移出隐藏及反复闪烁问题
Vamkit
05-19 1584
html代码 <!--prev 和 next 是需要移入显示移出隐藏区域 --> <div id="prev"></div> <div id="next"></div> <!--play是鼠标移入移出区域 --> <div id="play"> <ul> <li style="display: block;"><img alt=
hover 鼠标悬浮边缘不停闪烁问题
qq_34703942的博客
08-04 1267
hover一般加载父元素上，比如一张图片上要加hover效果 可以这样： <div class='imgClass'><img src='*****' /></div> css样式这样设置： .imgClass{ width:20px; height:20px; } .imgClass img{ width:20px; height:20px; } .imgCla
关于 hover 时候闪烁的问题
weixin_30772261的博客
04-25 905
实现功能：鼠标移入 div1 时显示 div2，移出是隐藏，两个 div 的位置关系是上下重叠。 问题：当两个 div 是独立的不相互关联的时候（特殊需求形成了如下布局，已简化），鼠标移入会疯狂闪烁（div2 一直在显隐之间徘徊） <div class="div1"></div> <div class="div2"></div>...
图片hover时有遮罩
baidu_34197758的博客
07-29 2648
以往想到给图片加个蒙版遮罩，之前都会这样写 img{width:400px;} .div1{position: relative;display: inline-block;} .span1{position: absolute;top:0;bottom: 0;left:0;right:0;background: rgba(0,0,0,.5);display: none;z-index
鼠标hover的时候出现，离开的时候隐藏的效果。内容会出现闪动
肖肖肖丽珠的博客
09-13 5739
如果用的是display:none ,display:block显示隐藏的就会有这个问题。因为display为none的时候是不占位置。而显示的时候又占了位置。 所以你可以用opacity li  .bottom{      opacity:0;     filter:alpha(opacity=0);     border-color:#fff; } li{border:1px s...
css中hover
05-26
在 CSS 中，:hover 是一个伪类，它表示鼠标指针悬停在某个元素上时的状态。通常情况下，我们可以使用 :hover 来为元素添加一些交互效果，如改变元素的颜色、大小、背景等。例如，我们可以使用以下代码为所有链接添加悬停效果： ```css a:hover { color: red; } ``` 这样当用户将鼠标指针悬停在链接上时，链接的文本颜色会变成红色。除了链接之外，其他元素也可以使用 :hover 来添加交互效果，如按钮、图片等。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值