mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法
要实现的效果和代码思路
简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现
最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的。
遇到的问题
遇到的问题是 当鼠标从喇叭移动到悬浮框上面的时候 鼠标移动到三角那个空隙的时候 下面的悬浮框就会消失
解决办法有的人说 mouseleave的时候用timeout判断一下,如果移到下面那个悬浮框上了(判断是否移动到悬浮框,给悬浮框写mouseentered事件),就把隐藏逻辑停掉就行了,我试了下,很不好用
出现问题的原因
仔细想了想,其实用简单的css就可以解决。之所以遇到上面所说的问题是因为喇叭和悬浮框中间有空隙,因此鼠标移动到了这个空隙上的时候,就相当于焦点移开了包着喇叭和悬浮框的div。
解决办法
我们只要在这个悬浮框外面再套一个div(这个div的css样式只写位置不写背景色),这个div就会跟喇叭同级,让这个div和这个喇叭之间没有空隙,鼠标悬浮到喇叭上的时候,让这个div出现,自然这个div包着的有背景色的悬浮框也会出现了。只要这个div和这个喇叭之间没有空隙,那么鼠标从喇叭移动到下面的悬浮框的时候,就不会触碰到空隙,因而悬浮框就不会消失。
mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法的更多相关文章
- C#的tooltip自动消失之后就不再显示了解决办法
转:http://www.51testing.com/?uid-569418-action-viewspace-itemid-832231 在控件上加上tooltip之后,鼠标放到控件上,toolti ...
- AD设计中地铜突然消失且无法选中删除的解决办法
作者:struct_mooc 博客地址: https://www.cnblogs.com/structmooc/p/14984466.html 前几天在设计一块电路板的时候,已经全部设计完了!但是 ...
- 搭服务器之kvm--vnc连接虚拟机连接闪退直接消失 以及virsh shutdown命令无效解决办法。
之前暑期见识到了虚拟化在企业中的应用,感慨不小,以前只是自己在玩儿桌面vmware workstation,安装的虚拟机也没啥大感觉.在公司机房里大家用的dell poweredge 420,8gme ...
- Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框
问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现 ...
- js实现页面悬浮框
当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE ht ...
- JavaScript侧边悬浮框
<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=d ...
- HTML5气泡悬浮框(已经加上完整文件)
源文件链接:http://pan.baidu.com/s/1pKHlNSn 设计气泡悬浮框 1.在网页设计中,气泡悬浮框常常用于页面中为某些对象显示提示信息,恰当地使用气泡悬浮框能够使网页布局更加完美 ...
- C# 鼠标悬停在datagridview的某单元格,显示悬浮框效果
今天在做项目时,看到一软件做的悬浮框效果不错,从网上搜罗了一些资料,未见到有十分好的解决办法,只能自已动手,利用datagridview 的ToolTipText 来达到此效果. 以下是我简单实现的代 ...
- js右侧悬浮框
示例:屏幕右侧悬浮框 原理:oDiv.style.top = document.documentElement.clientHeight - oDiv.offsetHeight + scrollTop ...
随机推荐
- 160421、MyBatis批量插入数据
在程序中封装了一个List集合对象,然后需要把该集合中的实体插入到数据库中,由于项目使用了Spring+MyBatis的配置,所以打算使用MyBatis批量插入,由于之前没用过批量插入,在网上找了一些 ...
- 进击的RecyclerView入门一(简单上手)
虽然RecyclerView面世有一段时间了,但由于它的学习成本相对较高,很多码友只是粗略的认识了一下而没有细致的品味RecyclerView的真谛. 那么从现在开始我将带你装逼带你飞,一起领略Goo ...
- 飘城旅游网pc,流式,响应式布局
相关视频教程http://pan.baidu.com/s/1o77wirK 我的源码链接:http://pan.baidu.com/s/1czTsKI
- 领悟 JavaScript 中的面向对象
JavaScript是基于对象的语言,我们可以使用面向对象的思想去开发js代码. JavaScript是基于对象的语言. 可以使用面向对象的思想,但是不少人对这一点理解得并不全面. 在 JavaScr ...
- Python全栈day21-22-23(模块)
一,python的模块 Python 模块(Module),是一个 Python 文件,以 .py 结尾,包含了 Python 对象定义和Python语句. 模块让你能够有逻辑地组织你的 Python ...
- CSS 中 BEM命名方式
BEM的意思就是块(block).元素(element).修饰符(modifier),是一种CSS Class 命名方法. 类似于: .block{} .block__element{} .block ...
- iros2016-Monday 10/10/2016
Workshop Day Integrating Multiple Knowledge Representation and Reasoning Techniques in Robotics (MIR ...
- 如何实现手游app瘦身?
手游服务商来说,手游包体大一直是个很困扰的问题.一款手游产品而言,包体大小和更新方式对于有效用户的转化率往往起到非常关键的作用,话说手游安装包越小,用户转化率越高,那该如何实现app瘦身呢? 工具/原 ...
- lua相关库安装常见问题
一.先安装lua brew install lua 我本机的安装路径为:/usr/local/Cellar/lua/5.3.4_2 二.安装luarocks 下载luarocks的安装包: http: ...
- 关于DOM事件操作
事件的三要素: 事件源.事件.事件驱动程序. 事件源.: 引发后续事件的html标签 document.getElementById(“box”) document.getElementsByCl ...