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

问题描述

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

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

问题解决

既然知道了是怎样出现了，那就好解决了。因为直接在需要改变位置的元素加hover属性，在触发边缘时，元素就发生向上的的位置变化，然后鼠标就和元素没有接触了，就时非hover属性，元素位置要还原，然后又接触到鼠标，变成了hover属性。如此循环就会不停闪动，用户体验很差。
解决方案就是将hover属性放置元素的上一层。将上一层元素位置固定到原位置

如上图的绿框元素添加hover属性，因为绿框位置不变，边缘位置就固定，就不会出现闪动效果，最后修复效果如下

一句话：完美

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

纯CSS发光动效-CSS制作logo发光效果
纯CSS发光动效-CSS制作logo发光效果这里是html部分,复制进去就能用很简单 <div class="logo-nav"><a href="# ...
CSS-动效纯css粒子动效 | 转圈圈 | 上下弹动
文章目录粒子动效转圈圈上下弹动粒子动效拾人牙慧,主要是利用css的box-shadow属性,设置便宜点位,然后加上animation属性失效的效果. PS:实际使用中发现如果屏幕尺寸很宽的话 ...
html与css结合动效案例,写CSS动效的常用套路(附demo的效果实现与源码）
作者:alphardex https://juejin.im/post/5e070cd9f265da33f8653f0 前言本文是笔者写CSS时常用的套路.不论效果再怎么华丽,万变不离其宗. 1.交 ...
html的css雪花动效,《前端每日实战》第171号作品：用纯 CSS 绘制一朵美丽的雪花...
昨夜北京下了大雪,让我们用 CSS 绘制一朵雪花,迎接这洁白美好的世界吧! 一.效果预览按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. 二.源代码下载每日 ...
html与css结合动效案例,CSS3制作动画效果例子
实现网站的图片.文字的动态效果,我们有photoshop制作多帧动画GIF.用flash制作更精巧的动画,还有利用javascript通过识别ID/CLASS 来实现对应DIV块的动画效果.然而,即使 ...
button按钮onclick触发不了_手把手教你深入CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 转载链接: https://github.com/XboxYan/note ...
怎么实现hover_web前端CSS实现一个粒子动效的按钮
按钮(button)可能是网页中最常见的组件之一了,大部分都平淡无奇,如果你碰到的是一个这样的按钮,会不会忍不住多点几次呢? 通常这类效果第一反应可能就是借助canvas了,比如下面这个案例点击预览( ...
CSS 实现按钮点击动效的套路
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群在 Web 中,大部分按钮可能都是平平无奇的,有时候为了强调品牌特殊或者满足特殊功能,可能需 ...
div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...

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

问题描述

问题解决

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

最新文章

热门文章