mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法

要实现的效果和代码思路

简单来说就是 用一个div包着喇叭和悬浮框 悬浮事件写在这个div上 鼠标悬浮到div上的时候 悬浮框出现

最终要做成鼠标从小喇叭移动到下面的框上的时候 下面框是不会消失的。

遇到的问题

遇到的问题是 当鼠标从喇叭移动到悬浮框上面的时候 鼠标移动到三角那个空隙的时候 下面的悬浮框就会消失

解决办法有的人说 mouseleave的时候用timeout判断一下，如果移到下面那个悬浮框上了（判断是否移动到悬浮框，给悬浮框写mouseentered事件），就把隐藏逻辑停掉就行了，我试了下，很不好用

出现问题的原因

仔细想了想，其实用简单的css就可以解决。之所以遇到上面所说的问题是因为喇叭和悬浮框中间有空隙，因此鼠标移动到了这个空隙上的时候，就相当于焦点移开了包着喇叭和悬浮框的div。

解决办法

我们只要在这个悬浮框外面再套一个div（这个div的css样式只写位置不写背景色），这个div就会跟喇叭同级，让这个div和这个喇叭之间没有空隙，鼠标悬浮到喇叭上的时候，让这个div出现，自然这个div包着的有背景色的悬浮框也会出现了。只要这个div和这个喇叭之间没有空隙，那么鼠标从喇叭移动到下面的悬浮框的时候，就不会触碰到空隙，因而悬浮框就不会消失。

mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法

时间： 2024-11-05 18:56:49

mouseleave mouseout时候悬浮框不应该消失的时候消失了 css 解决办法的相关文章

Js实现一键分享效果--悬浮框状态

一．html框架 /*整个分享区域*/    <div id="share">         /*分享区域的顶端文字描述*/              <h3><img src="../img/chaohao.png">分享到...</h3>         /*分享区域的的具体分享网站链接*/              <ul>                    <li><a hr

js实现页面悬浮框

当滚动条下拉时,悬浮框位置不变,主要是 position:fixed;样式的作用. 当下拉到一定程度,接近footer时,我用js控制div消失,往上拉滚动条时又显示. <!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .div1 { height:2000px; } .div2 { width:100%; height:35

Echarts ecomfe 触摸屏 touch 在IE10下无法显示悬浮框

问题描述: Windows 8 IE10浏览http://echarts.baidu.com/doc/example/line2.html 时,鼠标放置在数据点上时无法显示悬浮框. 正常情况为: 而现在情况为: ? 问题分析: 公司有各种型号电脑,X230,W530,X240,业务部门多使用x240, 这一款笔记本屏幕带有触摸屏功能,其他型号没有.所有操作系统都为win8,IE10小版本号也一致. 最初就将问题定位为触摸屏引起了这个问题,但一直无法找到具体原因.因为在chrome,firfox等

小米Adnroid默认禁止悬浮框的使用，导致开发的悬浮框无法接收事件

比如你建了一个悬浮框: WindowManager windowManager = getWindowManager(context); int screenWidth = windowManager.getDefaultDisplay().getWidth(); if (smallWindow == null) { smallWindow = new FloatWindowSmallView(context); if (smallWindowParams == null) { smallWin

“右侧悬浮框”页面特效

功能描述: 悬浮框固定在页面右下方,随着滚动条的滚动,悬浮框运动到固定位置. 实现效果: 编码思路: 获取滚动条滚动时,方块需要移动的目标位置(可视区域的高度-物体高度-滚动的高度). 套用运动框架. 示例代码:

JavaScript侧边悬浮框

<script> window.onscroll=function(){ var oDiv=document.getElementById('div1'); var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; oDiv.style.top=(document.documentElement.clientHeight-oDiv.offsetHeight)/2+scrollTop+'px'; star

android悬浮框的使用

实质就是开启一个界面透明的activity 注意:在startService 想在startActivity intent必须要设置addFlags(Intent.FLAG_ACTIVITY_NEW_TASK); 直接上Demo---myFloat http://pan.baidu.com/s/1gdIK4QR android悬浮框的使用

悬浮框

1. 右侧底部悬浮框 运行效果图: [http://runjs.cn/code/zvjocat0] 要点:oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop; 2. 右侧中部悬浮框 运行效果图:[http://runjs.cn/code/bws1gmne] 要点: oDiv.style.top=Math.ceil((document.documentElement.clientHeigh

使用悬浮框监听内存的使用状态 -- 附源码

源码下载地址:http://download.csdn.net/detail/hewence1/8176601 <span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">先看一下效果:  显示当前内存使用率55% ,每一秒都刷新一次</span> 实现原理,在Service中创建一个悬浮框就可,在service中每秒钟访问计算一次单