<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层的更多相关文章

  1. echart 时间轴、以及y轴值过大但是变化不大显示感觉不出变化的问题+弹出框拖动div事件

    1.时间轴 echart 提供了一种图表,如果x轴是一个时间范围,并且是连续的,如果用传统的数据驱动会很慢,所以用时间轴的方式 function initCurve(_data){ var resul ...

  2. Axure Base 09 带遮罩层的弹出框

    示例原型下载:小楼Axure原创元件-带遮罩层的弹出框 实现目标: 1.   点击按钮弹出带遮罩层的对话框: 2.   页面上下左右滚动时,弹出的对话框水平和垂直始终居中. 实现步骤如下: 1. 拖入 ...

  3. js 带遮罩层的弹出层

    最近有个小伙伴问我关于mui的带遮罩层的弹出层,我给他发了个相关demo,但是因为他是新手的原因没有看懂,所以我写了一个单纯的原生的带遮罩层的弹出层dome.写这篇微博希望可以帮到需要的小伙伴. &l ...

  4. web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开

    https://blog.csdn.net/zgsdzczh/article/details/79744838 web页在微信中访问增加遮罩层 右上角弹出在浏览器中打开   <style typ ...

  5. 【Javascript Demo】谷歌地图简单实现(附遮罩层和弹出层实现)

    虽然百度地图实现了,但只是国内的,而且前几天貌似还出问题了,对于国际的只能用谷歌地图了,所以就简单研究了下,做了个差不多的. 基本步骤,谷歌地图API文档其实写的很清楚了,先获取API密钥,然后引用j ...

  6. 【Javascript Demo】遮罩层和弹出层简单实现

    最近纠结于遮罩层和弹出层的实现,终于搞定了个简单的版本.示例和代码如下,点击按钮可以看到效果: 1.示例: 2.代码: <!DOCTYPE html PUBLIC "-//W3C//D ...

  7. 2019-9-25-如何让-USB-设备不显示安全删除硬件弹出选项

    title author date CreateTime categories 如何让 USB 设备不显示安全删除硬件弹出选项 lindexi 2019-09-25 11:58:19 +0800 20 ...

  8. td里的内容宽度自适应 及 鼠标放上显示标题div title

    td里的内容自适应宽度, 用 width:100%控制 strRight+="<td bordercolor='#DEDEDE' width='500px' height='50px' ...

  9. 动态创建div(鼠标放上显示二维码)

    最近的微信大行其道.各个网站上都给出的微信验证码,进行手机扫描加入. 怎么创建类似与点击鼠标弹出一个浮动的div显示二维码的这种效果. 1.首先制作好这样的图片,写css样式 <style ty ...

随机推荐

  1. [转]MyBatis中resultType与resultMap区别

    MyBatis中关于resultType和resultMap的具体区别如下: MyBatis中在查询进行select映射的时候,返回类型可以用resultType,也可以用resultMap.resu ...

  2. 5、Linux-Mac配置环境变量

    1.安装jdk1.6,1.7,1.8 2.查看jdk安装目录 /usr/libexec/java_home -v 1.6 /usr/libexec/java_home -v 1.7 /usr/libe ...

  3. hadoop append 追加文件错误

    java.io.IOException:Failed to replace a bad datanode on the existing pipeline due to no more good da ...

  4. mybatis异常:Caused by: java.lang.IllegalArgumentException: Result Maps collection already contains value for。。。。。。

    框架环境:ssm 昨天下午技术经理更新了下表结构,多加了一个字段. 之后我根据新的mapper.xml文件写了增删改查的操作.重新启动之后不是这个错就是那个错,一大堆错误,头疼. 像类似于NoSuch ...

  5. Pandas的使用(3)---Pandas的数据结构

    Pandas的使用(3) Pandas的数据结构 1.Series 2.DataFrame

  6. golang 字符串统计

    golang内建只认utf8 如果传递的字符串里含有汉字什么的,最好使用 utf8.RuneCountInString() 统计 字符串统计几种方法: - 使用 bytes.Count() 统计- 使 ...

  7. java流程控制与选择控制

    流程控制语句 顺序   程序的正常执行 选择 if else多重if,嵌套if,switch; 循环 for whlie,do whlie; 案例1 自己对代码进行改进!!!!!!!!!!!!!!! ...

  8. Maven 之多模块构建

    项目的打包类型:pom.jar.war 项目中一般使用maven进行模块管理,每个模块下对应都有一个pom文件,pom文件中维护了各模块之间的依赖和继承关系.项目模块化可以将通用的部分抽离出来,方便重 ...

  9. WASAPI、DirectSound/DS、WaveOut、Kernel Streaming/KS

    先放结论: ASIO:硬件支持+对应驱动程序 DS:兼容性最好,一般也是默认的. WASAPI:是Vista之后的,较佳选择输出方式. 再来详细看: ASIO.WDM都是指音频通道,就是音频数据走的路 ...

  10. Java第05次实验提纲(Java图形界面编程)

    1. Swing与NetBeans 使用NetBeans编写简单界面.见GUI实验参考文件中的0.第06次实验(图形程序设计.事件处理与Swing).doc 题目1: Swing用户界面组件与事件处理 ...