首页 > 其他分享 >元素设置:hover动效边缘触发频繁闪动怎么解决

元素设置:hover动效边缘触发频繁闪动怎么解决

时间:2024-05-25 22:56:40浏览次数:22  
标签:触发 hover 鼠标 元素 动效 选中 闪动

元素设置:hover动效边缘触发频繁闪动怎么解决

前言:

1. 我并没有深入了解,难免出错

一、问题出现的原因

众所周知,:hover选择器是在鼠标移到元素上时产生效果,即鼠标移到元素上,触发:hover,鼠标离开元素,恢复。因此,元素设置:hover动效边缘触发频繁闪动产生的原因就是:hover触发的样式更改,导致虽然鼠标未主动离开选中的元素,但是选中的元素位置移动了离开了鼠标,或者其他元素挡住了需要选中的元素。如下图:

image

二、解决办法

1.如果是选中的元素移动了,可是设置移动的距离避免元素离开鼠标。

2.如果是:hover产生的效果导致需要选中的元素被其他元素挡住了,可以设置需要选中的元素或其他元素的z-index或其他相关属性,避免选中的元素离开鼠标。

标签:触发,hover,鼠标,元素,动效,选中,闪动
From: https://www.cnblogs.com/wsgxg/p/18213076

相关文章

  • vue路由切换滑动效果
    1.增加页面路由{path:'/feedbackList',name:'feedbackList',component:()=>import('../views/feedbackList/index'),meta:{title:"反馈列表",index:1}},{path:'/feedback......
  • CSS动画-数字轮盘滚动效果实现(组件封装,快速使用)
    效果图:原理分析:这玩意就和垂直方向的轮播图差不多,只是把轮播的图换成数字 主要实现:父组件:父组件接收一个curNum属性,这个属性代表当前需要显示的数字。它将这个数字传递给子组件AnimateNum,以便子组件可以正确地显示和滚动数字。子组件一(AnimateNum):这个组件接收父组件传递......
  • CSS实现浮动效果
    一、浮动早期用于实现文字环绕图片(环绕布局),现在用于让元素并列布局(块元素并排)。浮动元素会脱离文档流,后边的元素会把空出来的位置补上去。但是又因为浮动元素的层级高,所以会将未浮动的元素进行覆盖,但是文字不会。float:none无浮动,left左浮动,right右浮动。1、css布局的三种机......
  • Unity2D横板游戏之背景视差与无限滚动效果
    Unity2D横板游戏之背景视差与无限滚动效果简单介绍背景视差效果。在2D横板游戏中,由若干个背景图片构成的背景,在背景移动的过程中,每一个背景图片的移动速度均不同,靠近玩家的背景图片移动速度快,而远离玩家的背景图片移动速度慢,从而形成背景的视差效果,使背景更加立体且富有层级。......
  • vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
    Hello,大家好,我是小编鹏仔,鹏仔一直觉得VUE在H5端路由跳转时交互特别丑,一直想写成那种点击滑动切换类的效果,趁着这两天工作不是很忙就网上搜了下,最终在多个搜索结果中选择了一种方式实现,效果如下图所示,点击路由跳转时是页面是滑动切换。逻辑其实还是很简单的,就是监听在路由切换时加......
  • HarmonyOS NEXT应用开发案例—使用弹簧曲线实现抖动动画及手机振动效果案例
    介绍本示例介绍使用vibrator.startVibration方法实现手机振动效果,用animateTo显示动画实现点击后的抖动动画。效果图预览使用说明加载完成后显示登录界面,未勾选协议时点击一键登录按钮会触发手机振动效果和提示文本的抖动动画。实现思路创建一个函数startVibrate()调用v......
  • HarmonyOS NEXT应用开发—翻页动效案例
    介绍翻页动效是应用开发中常见的动效场景,常见的有书籍翻页,日历翻页等。本例将介绍如何通过ArkUI提供的显示动画接口animateTo实现翻页的效果。效果图预览使用说明本例通过setInterval函数每秒调用一次翻页动画,实现连续翻页效果。实现思路如图,左右两侧分别代表打开书籍的......
  • openGauss主备切换之switchover与failover
    openGauss主备切换之switchover与failoverswitchover在主备机正常时,出于维护的需要,将备机切换为主机,可保证切换过程中数据不丢失。查看集群实例主备状态:1节点为主库,2节点为备库。$gs_om-tstatus--detail[ClusterState]cluster_state:Normalredistribu......
  • openGauss主备切换之switchover与failover
    openGauss主备切换之switchover与failoverswitchover在主备机正常时,出于维护的需要,将备机切换为主机,可保证切换过程中数据不丢失。查看集群实例主备状态:1节点为主库,2节点为备库。$gs_om-tstatus--detail[ClusterState]cluster_state:Normalredistribu......
  • echarts X轴类目名太长时隐藏,hover时显示全部
    echarts图表X轴在柱状图中,X轴类目名如果数据太长;echarts会默认进行隐藏部分字段;如果我们想让每一个类目名都显示出来,需要进行额外的处理X轴类目名太长时,默认只显示一部分类目名<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="......