手机
当前位置:查字典教程网 >编程开发 >Javascript教程 >Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击
摘要:实例如下所示:复制代码代码如下:Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击$(document)...

实例如下所示:

复制代码 代码如下:

<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">

<a href="#">深圳市</a>

<a href="#">广州市</a>

<a href="#">东莞市</a>

</div>

</body>

</html>

【Jquery利用mouseenter和mouseleave实现鼠标经过弹出层且可以点击】相关文章:

JS函数实现鼠标指向图片后显示大图代码

document 和 document.all 分别什么时候用

JavaScript实现表格点击排序的方法

jQuery插件expander实现图片翻转特效

基于JavaScript实现图片点击弹出窗口而不是保存

去除链接虚线全面分析总结

javascript使用Promise对象实现异步编程

jQuery使用zTree插件实现树形菜单和异步加载

jQuery实现弹出窗口中切换登录与注册表单

脚本收藏iframe

精品推荐
分类导航