mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法
2014-08-08 14:09
281 查看
要实现的效果和代码思路
简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现
最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的。
遇到的问题
遇到的问题是 当鼠标从喇叭移动到悬浮框上面的时候 鼠标移动到三角那个空隙的时候 下面的悬浮框就会消失
解决办法有的人说 mouseleave的时候用timeout判断一下,如果移到下面那个悬浮框上了(判断是否移动到悬浮框,给悬浮框写mouseentered事件),就把隐藏逻辑停掉就行了,我试了下,很不好用
出现问题的原因
仔细想了想,其实用简单的css就可以解决。之所以遇到上面所说的问题是因为喇叭和悬浮框中间有空隙,因此鼠标移动到了这个空隙上的时候,就相当于焦点移开了包着喇叭和悬浮框的div。
解决办法
我们只要在这个悬浮框外面再套一个div(这个div的css样式只写位置不写背景色),这个div就会跟喇叭同级,让这个div和这个喇叭之间没有空隙,鼠标悬浮到喇叭上的时候,让这个div出现,自然这个div包着的有背景色的悬浮框也会出现了。只要这个div和这个喇叭之间没有空隙,那么鼠标从喇叭移动到下面的悬浮框的时候,就不会触碰到空隙,因而悬浮框就不会消失。
相关文章推荐
- mouseover、mouseout控制显示隐藏时,离开主导航子导航消失的解决办法
- 解决jquery mobile的header和footer在点击屏幕的时候消失的办法
- 关于在页面审查元素的时候遇到 element .style 这种的在css里面找不到的解决办法
- struts2的实体类映射成数据库表格时,实体类的某个属性类型设为date,但是映射结果在数据库中是datetime类型的,这个时候我们应该采用的解决办法
- html+css高度100%的时候边框超出,出现滚动条的解决办法,带边框的100%高度
- jQuery mobile的header和footer在点击屏幕的时候消失的解决办法
- ide 页面进行css检查时候会抖动页面的解决办法(防止自己忘记)
- 高人的文章:关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 用CSS解决中英文混合字符串的截取省略问题的解决办法
- Asp.net中与codePage="936"有关的css失效等奇怪问题的解决办法(原创)
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- asp.net下的CSS失效解决办法
- IntelliJ IDEA 5.1 编译时候"Bad class file format" 的解决办法
- DIV+CSS构建网站时常会出现浏览器不兼容的问题,下面整理了一些常见不兼容问题,及解决办法!
- rhel5启动的时候很慢解决办法
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 关于loose.dtd和xhtml1-transitional.dtd等文档类型定义模型中CSS失效的解决办法。
- 用CSS解决中英文混合字符串的截取省略问题的解决办法
- vs2005 工具箱控件消失的解决办法
- xp登录,账户administrator消失的解决办法