css鼠标经过div1时div2消失,CSS_两个div叠加触发事件发生闪烁问题的解决方法，当鼠标移到div1上的时候，会出 - phpStudy...

2024-05-11 23:32:31

两个div叠加触发事件发生闪烁问题的解决方法

当鼠标移到div1上的时候，会出现div2。出现时div2在div1的上面，div2在出现后发生闪烁的问题。

于是开始找问题根源，发现原来是因为当我们触发div1的时候，div2出现，但是div2是存在于div1上面的，所以当div2出现后，会又一次触发下面div1的事件。通常我们可能给的事件是mouseover和mouseout，因为两个div叠加，div2出现时会多次触发div1的事件，所以就会发生闪烁问题。

解决：

1.一开始换mouseenter和mouseleave，但是发现还是一样的问题。

注：

mouseover()与mouseout() 表示鼠标移入和移出的时候触发，穿过子元素也会触发

mouseenter()和mouseleave() 表示鼠标穿过和穿出时候触发，穿过子元素不会触发

2.然后又添加e.stopPropagation();阻止冒泡和e.preventDefault();阻止默认事件，还是没有对症。

注：

e.stopPropagation(); //阻止冒泡之后，就不会形成冒泡向上传递了。

e.preventDefault(); //阻止默认行为

3.最后换为切换事件toggle切换事件也不顶事儿。

4.最终，如果想用js解决这个问题可能不容易，用js基本都会发生闪烁问题。那么我们使用css方式是不是可以解决呢？网上查了很多资料，发现也有很多人遇到这个问题，使用的是css中的hover来解决的。

具体使用方法：

给两个div的父元素，也就是共同包裹两个div的盒子一个hover，当父元素hover时，div2的样式设置为display：block;于是就顺利解决了这个问题，不会再出现闪烁问题。

下面上代码：

html部分：

XML/HTML Code复制内容到剪贴板

css鼠标经过div1时div2消失,CSS_两个div叠加触发事件发生闪烁问题的解决方法，当鼠标移到div1上的时候，会出 - phpStudy...相关推荐

[C#]datagridView实现的数据联动时selectionChanged事件发生多次的解决方法
Q:对于两个datagridView实现的数据联动,主datagridView绑定数据时selectionChanged事件发生多次,什么原因,如何避免? A:selectionChanged事件MS ...
C语言编辑时光标一直闪,win7系统编辑文字鼠标光标一直闪烁问题的解决方法 - win7吧...
win7系统编辑文字鼠标光标一直闪烁问题的解决方法使用电脑的过程中我们肯定是会进行文字输入的,不管是聊天游戏还是网页访问我们都会必要的进行一些文字编辑,但是有用户在对文字进行编辑时却遇到鼠标光标一 ...
在安装project2010 64位时提示 “无法安装64位office，因为已有32位版本”解决方法
在安装project2010 64位时提示 "无法安装64位office,因为已有32位版本"解决方法参考文章: (1)在安装project2010 64位时提示 "无 ...
Mysql登录时出现Access denied for user ‘root‘@‘localhost‘ (using password YES)无法打开的解决方法
MySQL登录时出现Access denied for user 'root'@'localhost' (using password: YES)无法打开的解决方法本人配置:系统64位win10,M ...
Mac连Wi-Fi时显示：“wifi有自分配的ip地址将无法接入互联网”解决方法
Mac连Wi-Fi时显示:"wifi有自分配的ip地址将无法接入互联网" 解决方法: 打开网络偏好设置选择高级模式点击[Wi-Fi],找到现在连接的无法上网的Wi-Fi,点击[ ...
备份u8提示文件服务器错误,升级用友U8V12.0时发生文件服务器抛错解决方法
文章摘要:问题现象:升级U8V12.0时发生文件服务器抛错解决方法?近期发现部分客户升级用友U8V12.0时发生文件服务器抛错的现象,经过分析,此问题是因为补丁未及时更新等造成,要求在升级前必须按照如 ...
Windows 2012 安装windows server backup时发生错误0x80070422 的解决方法
Windows 2012 安装windows server backup时发生错误0x80070422 的解决方法错误代码0x80070422是由于系统更新服务出错而引起的错误,具体的原因可以从以下 ...
php iconv 空格,PHP_PHP中iconv函数转码时截断字符问题的解决方法，iconv是转换编码的，但是在中 - phpStudy...
PHP中iconv函数转码时截断字符问题的解决方法 iconv是转换编码的,但是在中文转码时候出现显示不全问题. iconv("UTF-8","GB2312//IGNOR ...
服务器复制文件出现io错误,win7系统复制文件时发生IO错误的解决方法
很多小伙伴都遇到过win7系统复制文件时发生IO错误的困惑吧,一些朋友看过网上零散的win7系统复制文件时发生IO错误的处理方法,并没有完完全全明白win7系统复制文件时发生IO错误是如何解决的,今天 ...

最新文章

热门文章