关于css hover动效边缘触发频繁闪动的解决方案

最新推荐文章于 2023-10-08 20:46:55 发布
最新推荐文章于 2023-10-08 20:46:55 发布
阅读量7k 收藏 7
点赞数 8
分类专栏： css3 文章标签： css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34690340/article/details/108507655
版权

问题描述

最近做一个官网，里面的动效比较多，也遇到了很多问题。便一点点的收录下来。今天遇到的问题如下图

在这里插入图片描述
当鼠标触发到边缘时，就会频繁切换hover 和 非hover状态，就出现了如图的一上一下的局面

问题解决

既然知道了是怎样出现了，那就好解决了。因为直接在需要改变位置的元素加hover属性，在触发边缘时，元素就发生向上的的位置变化，然后鼠标就和元素没有接触了，就时非hover属性，元素位置要还原，然后又接触到鼠标，变成了hover属性。如此循环就会不停闪动，用户体验很差。
解决方案就是将hover属性放置元素的上一层。将上一层元素位置固定到原位置
在这里插入图片描述
如上图的绿框元素添加hover属性，因为绿框位置不变，边缘位置就固定，就不会出现闪动效果，最后修复效果如下
在这里插入图片描述
一句话：完美

动手练一练，深入学习 4 个与 Hover 相关的动效案例 （上）
前端达人
09-06 1003
大家好，本篇文章小编将和大家一起学习 4 个 Hover 相关的动效案例，这 4 个案例分别是 Anchors（链接锚点）、Tooltips（提示层）、Card Content（内容卡片）、Button（按钮）相关的 Hover 效果，由于篇幅原因，本文只介绍前两个案例。1、Anchors（链接锚点）链接锚点的鼠标 Hover 效果是一个很常见的特效，看起来简单，但是相关的细节还是需要注意的，本小...
链接伪类（:hover）CSS背景图片有闪动BUG的解决方法
09-25
IE6下链接伪类（:hover）CSS背景图片有闪动BUG，主要原因ie会再一次请求这张图片，或者说图片没被缓存。
hover 鼠标悬浮边缘不停闪烁问题
qq_34703942的博客
08-04 1538
hover一般加载父元素上，比如一张图片上要加hover效果 可以这样： <div class='imgClass'><img src='*****' /></div> css样式这样设置： .imgClass{ width:20px; height:20px; } .imgClass img{ width:20px; height:20px; } .imgCla
使用hover时，鼠标放在上面移动时会不停的触发和闪动
qq_43484520的博客
10-27 2354
项目场景： 提示：这里简述项目相关背景： 例如：项目场景：示例:通过蓝牙芯片(HC-05)与手机 APP 通信，每隔 5s 传输一批传感器数据(不是很大) 问题描述： 鼠标移入div1的时候显示div2的内容，移出时 @Override public void run() { bytes = mmInStream.read(buffer); mHandler.obtainMessage(READ_DATA, bytes, -1, buffer).sendToTarget(); } 原因分析..
解决hover显示边框时发生抖动的问题
热门推荐
hst_gogogo的博客
06-04 1万+
当我们用 :hover 选择器的时候，如果要给鼠标滑过的元素加上边框或者加粗边框的时候，有可能会发生抖动现象（甚至有可能会挤走下面的元素），见下图： 解决方法： 方法一：提前加边框。给元素加上 n像素（想要hover的时候显示多少像素边框就加多少像素） 的和背景色一样的边框（或者干脆将border的透明度为0，eg: border:1px solid rgba(100,100,100,0)...
css样式hover图片闪烁问题
aaztliz78857的博客
03-22 898
主要是ie8及ie8以下版本浏览器会出现此问题, 问题核心是因为hover选择器没有缓存即将要替换的图片, 所以导致替换期间有一个极其短暂的空白期. 解决方案: 采用 background-position 的方式, 可缓解此问题. 但是低版本内核的浏览器在鼠标移动过快时, 仍然可以略微看到痕迹. 转载于:https://www.cnblogs.com/jiyang2008/p/5...
盒子添加：hover属性时内容出现抖动（原因和解决办法）
最新发布
2201_75935630的博客
10-08 1347
想要设置盒子添加：hover属性时就显示边框的效果，但盒子里的内容会出现明显的抖动。由属性引起，当一个盒子使用了属性，不管你设置边框、内边距，都是计算在盒子的宽高内，所以由于：hover属性突然插入一个border就会导致盒子里的内容重新调整位置，而出现视觉上的抖动。
css3动效 鼠标滑过出现光影效果
09-08
在CSS3中，动效是增强用户体验的重要手段之一。"鼠标滑过出现光影效果"是一种常见的交互设计，它能够使用户在浏览网页时感受到更为生动和动态的视觉体验。这种效果通常应用于导航菜单、按钮或者任何希望吸引用户注意...
前端css按钮动效支持阴影边线
10-08
按钮动效
创新H5动效技术：盲盒项目的CSS3动效展现
资源摘要信息:"该压缩包文件包含了盲盒项目H5中使用到的动效资源，主要涉及CSS3技术。动效包括图片翻转和弹幕滑动两种类型。图片翻转动效能够实现平滑的图片切换效果，增加用户交互体验；弹幕滑动动效则用于模拟屏幕...
解决css中hover做遮盖罩闪动问题(推荐)
09-24
主要介绍了解决css中hover做遮盖罩闪动问题的相关知识,需要的朋友可以参考下
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
10-20
下面小编就为大家带来一篇jquery hover 不停闪动问题的解决方法(亦为stop()的使用)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Rippleswxss是一个为微信小程序量身定制的css3动效库
08-10
在实际开发中，结合JavaScript，开发者还可以实现与用户交互的实时响应，例如在按钮点击后触发特定动效，或者根据数据变化动态更新动效状态。这样的微交互设计可以显著提升用户对小程序的满意度和留存率。 总结起来...
解决添加盒子边框hover效果时的抖动
Miketutu的博客
03-04 362
解决添加盒子边框hover效果时的抖动
CSS :hover闪烁问题
W_ang_Y_i的博客
09-23 1402
链接: link. 图片: 带尺寸的图片: 居中的图片: 居中并且带尺寸的图片:
CSS hover改变原生时出现抖动解决方法
weixin_45966674的博客
04-23 3930
首先分析原因 : 其实这是谷歌浏览器的BUG 当你改变内容时 浏览器以为元素超出了，立刻展示出滚动条 过一会儿又发现 :哦 元素改变了，但并没有超出啊…这样就不会抖动了，但坏处是滚动条会一直展示 就是元素没用超出 依旧会展示出一条白线。你可以隐藏滚动条 但不建议这样做 因为如果客户鼠标滚轮不好用 那就尴尬了。如果知道自己的元素肯达不会超出就可以这样写 否则还是不建议这种写法。于是就又把滚动条收回去了 …但这样可能会引发页面抖动的奇葩事。那解决办法就很明显了。
css 加粗或斜体hover鼠标划过,导致异常闪动,整体宽度增加的解决办法
07-07 1353
比如导航栏目有 首页,关于我们,产品,等 他们字数不同,宽度也不同,如果不固定宽度,如果设置鼠标划过字体加粗.则一定会出现后面的导航整体后移的问题. 需要固定每个导航条统一的宽度.或通过js的方式,先读取原标题li的宽度,再动态增加统一的一个宽度. //jq的写法 $(".navbar-nav li ").each(function(){ //先读.navbar-nav li 每个对应的宽度,再分别对他们增加9px //$(this).width($(this).width()+9);//写法
button 闪烁
li1095470578的博客
08-10 230
button样式
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值