jquery鼠标放上去显示悬浮层即弹出定位的div层
<div><a id="a1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')">鼠标放上去1</a></div>
<div id="div1" onmouseover="javascript:show('a1','div1');" onmouseout="hide('div1')" style="display: none; width: 218px; font-size: 12px; color: #333; border: 1px solid #FF6600; border-top: none; margin: 0px; background-color: #fff; position: absolute">
<ul>
<li><a href="#">运动</a></li>
<li><a href="#">钟表</a></li>
<li><a href="#">男装</a></li>
<li><a href="#">钻石饰品</a></li>
<li><a href="#">女装</a></li>
<li><a href="#">金银投资</a></li>
</ul>
</div> <script>
var ishide = 0;//判断是否需要隐藏div
function show(id1, id2) {
var obj1 = $("#" + id1 + "");
var obj2 = $("#" + id2 + "");
if (ishide == 0) {
ishide = 1;
}
$(obj2).css("display", "block"); //var X = obj1.offset().top;
//var Y = obj1.offset().left;
//$(obj2).offset({ top: X + 20, left: Y })
//$(obj2).css("left", X);
//$(obj2).css("top", Y + 10);
}
function hide(id2) {
ishide = 0;
setTimeout(hide2, 400, id2);
}
function hide2(id2) {
var obj2 = $("#" + id2 + "");
if (ishide == 0) {
$(obj2).css("display", "none");
}
}
</script>
<script language="javascript" src="jquery-1.4.2.min.js"></script>
<script>
function show(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display","block");
$(objDiv).css("left", event.clientX);
$(objDiv).css("top", event.clientY + 10);
}
function hide(obj,id) {
var objDiv = $("#"+id+"");
$(objDiv).css("display", "none");
}
</script>
<!--http://www.ablanxue.com/prone_3421_1.html-->
<div id="mydiv1" style="position:absolute;display:none;border:1px solid silver;background:silver;">
提示1效果
</div>
<div id="mydiv2" style="position:absolute;display:none;border:1px solid silver;background:silver;">
提示2效果
</div>
<a id="t1" onMouseOver="javascript:show(this,'mydiv1');" onMouseOut="hide(this,'mydiv1')">鼠标放上去1</a>
<br><br><br><br><br>
<a id="t2" onMouseOver="javascript:show(this,'mydiv2');" onMouseOut="hide(this,'mydiv2')">鼠标放上去2</a>
jquery鼠标放上去显示悬浮层即弹出定位的div层的更多相关文章
- echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件
1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...
- Axure Base 09 带遮罩层的弹出框
示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1. 点击按钮弹出带遮罩层的对话框: 2. 页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...
- js 带遮罩层的弹出层
最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...
- web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开
https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开 <style typ ...
- 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)
虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...
- 【Javascript Demo】遮罩层和弹出层简单实现
最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...
- 2019-9-25-如何让-USB-设备不显示安全删除硬件弹出选项
title author date CreateTime categories 如何让 USB 设备不显示安全删除硬件弹出选项 lindexi 2019-09-25 11:58:19 +0800 20 ...
- td里的内容宽度自适应 及 鼠标放上显示标题div title
td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px' ...
- 动态创建div(鼠标放上显示二维码)
最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...
随机推荐
- linux配置 ssh 免密 登录
1:第一步给每一台电脑生成公私钥 使用 在 root 目录下面 使用 ssh-keygen -t rsa ,然后不停敲回车.就可以生成公私钥.默认放在 .ssh 目录下面. 2:进入.ssh ...
- Jenkins进阶-用户权限管理(10)
在版本发布的由于大家的分工不同,所以想通过控制用户的账号达到权限管理,对每个角色进行权限控制,最初通过"项目矩阵授权策略"的策略对每个项目进行单一的权限控制,当时也满足了效果,随着 ...
- 二维指针的malloc内存分配(转)
写代码的时候会碰到多维数组的内存分配和释放问题,在分配和释放过程中很容易出现错误.下面贴上一些示例代码,以供参考. 如果要给二维数组(m*n)分配空间,代码可以写成下面: char **a, i; 1 ...
- cvs报错: socket exception recv failed
连接都OK的. 也可以telnet到服务器上去. 网上的各种方法都试了,没法解决. 后来一直在乱试,居然解决了. 就是这样设置的,选中第一个复选框.
- 简单说说 Java 的 JVM 内存结构
问:简单说说 Java 的 JVM 内存结构分为哪几个部分? 答:JVM 内存共分为虚拟机栈.堆.方法区.程序计数器.本地方法栈五个部分,分别解释如下.虚拟机栈:线程私有的,每个方法在执行时会创建一个 ...
- php Pthread 多线程基本介绍
我们可以通过安装Pthread扩展来让PHP支持多线程. 线程,有时称为轻量级进程,是程序执行的最小单元.线程是进程中的一个实体,是被系统独立调度和分派的基本单位,线程自己不拥有系统资源,它与同属 ...
- flume 架构设计优化
对于企业中常用的flume type 概括如下:ource(获取数据源): exec (文件) spoolingdir (文件夹) taildir(文件夹及文件的变动) kafka syslog ht ...
- 【java】构造函数
什么时候自定义构造函数:当分析事物时,事物一存在就具备一些特征或者行为,那么就把这么内容定义在构造函数中 作用:对对象进行初始化,对象一建立,就会自动调用与之对应的构造函数 特点: 1.函数名和类名相 ...
- 1.linux6 x86-64 RPM包安装mysql5.7.20
注意版本和此次更新时间 2017-12-03 版本:mysql-5.7.20-1.el6.x86_64 环境:linux6.x 官方下载地址: wget https://dev.mysql.co ...
- Linux系统构成和基本操作
Linux的优势 Linux的目录结构 Linux目录与文件管理 列出目录内容 创建新目录(文件夹) 创建文件 复制文件或目录 删除文件或目录 移动目录或文件 查看文件属性 文件属性含义 读权限-4 ...