Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
更新时间：2014年02月12日 09:37:32 作者：
这篇文章主要介绍了Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击。需要的朋友可以过来参考下，希望对大家有所帮助
实例如下所示：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>
<script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ps = $("#div_pro").position();
$("#float_box").css("position", "absolute");
$("#float_box").css("left", ps.left + 20); //距离左边距
$("#float_box").css("top", ps.top + 20); //距离上边距
$("#div_pro").mouseenter(function () {
$("#float_box").show();
});
$("#float_box").mouseleave(function () {
$("#float_box").hide();
});
})
</script>
</head>
<body>
<div>
<a href="#" id="div_pro">广东省</a>
</div>
<div id="float_box" style="display:none;">
<a href="#">深圳市</a>
<a href="#">广州市</a>
<a href="#">东莞市</a>
</div>
</body>
</html>
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击</title>
<script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var ps = $("#div_pro").position();
$("#float_box").css("position", "absolute");
$("#float_box").css("left", ps.left + 20); //距离左边距
$("#float_box").css("top", ps.top + 20); //距离上边距
$("#div_pro").mouseenter(function () {
$("#float_box").show();
});
$("#float_box").mouseleave(function () {
$("#float_box").hide();
});
})
</script>
</head>
<body>
<div>
<a href="#" id="div_pro">广东省</a>
</div>
<div id="float_box" style="display:none;">
<a href="#">深圳市</a>
<a href="#">广州市</a>
<a href="#">东莞市</a>
</div>
</body>
</html>
相关文章
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
下面小编就为大家带来一篇为jQuery-easyui的tab组件添加右键菜单功能的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-10-10
这篇文章主要介绍了jquery实现商品sku多属性选择功能（商品详情页）,文中简单给大家介绍了sku的概念，需要的朋友可以参考下2019-12-12
这篇文章主要介绍了jQuery中$.each使用详解,需要的朋友可以参考下2015-01-01
这篇文章主要介绍了c#结合jquery实现获取radio和checkbox的value值的方法，将代码分享给大家,需要的朋友可以参考下2014-12-12
以WordPress为例讲解jQuery美化页面Title的方法
鼠标移动到超链接时显示Title提示即是所谓Title美化的一般手段,这里我们就以WordPress为例讲解jQuery美化页面Title的方法,需要的朋友可以参考下2016-05-05
基于jquery的二级联动菜单实现代码，脚本之家简单整理了几种。需要的朋友可以参考下，主要是思路2011-04-04
这篇文章主要介绍了jQuery ztree实现动态树形多选菜单，ztree动态树形菜单，初始化加载和延迟加载，感兴趣的小伙伴们可以参考一下2016-08-08
本篇文章主要介绍了easyUI实现类似搜索框关键词自动提示功能示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。2016-12-12
这篇文章主要介绍了jQuery+css实现的时钟效果,使用js的setTimeout方法实时修改页面元素,实现动态显示时钟的功能.该代码可兼容各浏览器,需要的朋友可以参考下2016-01-01
这篇文章主要介绍了jQuery时间戳和日期相互转换操作,结合实例形式分析了jQuery针对日期与时间戳的转换、运算相关操作技巧,需要的朋友可以参考下2018-12-12
最新评论