<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使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击的更多相关文章

  1. jquery鼠标经过弹出层写法

    jquery鼠标经过弹出层写法<pre><div class="navitem"><a href="/index.php?c=news&am ...

  2. 【position也可以很复杂】当弹出层遇上了鼠标定位（下）

    前言 接着昨天的内容写,为了保证内容连续性,这里还是把昨天的内容拷了过来. 请用现代浏览器测试 引出问题 有图有真相,我们来看一个智联招聘里面经常出现的图层: 他这个是没有什么问题的,我们来简单看看其 ...

  3. 【position也可以很复杂】当弹出层遇上了鼠标定位（上）

    前言 周五时同事有一个关于弹出层的问题没有解决,但是面临下班问题,我有点不舒服,便叫回去周六过来解决,但是上周六病了,所以请了个假,于是故事发生啦.... 今天上班时候,组员们卡到了那个地方,然后结果 ...

  4. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  5. jQuery WIN 7透明弹出层效果

    jQuery WIN 7透明弹出层效果,点击可以弹出一个透明层的jquery特效,插件可以调弹出框的宽度和高度,很不错的一个弹出层插件. 适用浏览器:IE8.360.FireFox.Chrome.Sa ...

  6. Jquery地图热点效果-鼠标经过弹出提示信息

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  7. jQuery Dialog弹出层对话框插件

    Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js /** * jQuery的Dialog插件. * * @param object ...

  8. 如何不使用js实现鼠标hover弹出菜单效果

    最近看到很多同学在实现鼠标hover弹出菜单的效果时都是用的js代码去实现的,默认给弹出隐藏掉,通过js事件绑定动态的显/隐弹出菜单元素. <ul> <li>主页</li ...

  9. 弹出层之2：JQuery.BlockUI

    JQuery.BlockUI是众多JQuery插件弹出层中的一个,它小巧(原版16k,压缩后10左右),容易使用, 功能齐全,支持Iframe,支持Modal,可定制性高也意味他默认谦虚的外表. jQ ...

随机推荐

  1. MySQL中char与varchar区别，varchar最大长度是多少？

    一.首先来说下字符与字节的区别: 字符与字节它们完全不是一个位面的概念,所以两者之间没有"区别"这一说法.在不同编码里,字符和字节的对应关系是不同的.一般来说,半角英文状态下一个字 ...

  2. 201521123091 《Java程序设计》第2周学习总结

    Java 第二周总结 第二周的作业. 一个简陋的目录 1.本章学习总结 2.Java Q&A 3.使用码云管理Java代码 4.PTA实验 5.小任务 1.本章学习总结 基本数据类型 Stri ...

  3. 201521123023《Java程序设计》第7周学习总结

    1. 本周学习总结 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代码 分析:该方法实现了ArrayList数组的遍历,从而确定所查内容是否存在 1 ...

  4. 201521123044 《Java程序设计》第9周学习总结

    1. 本章学习总结 2. 书面作业 本次PTA作业题集异常 1.常用异常题目5-1 1.1 截图你的提交结果(出现学号) 1.2 自己以前编写的代码中经常出现什么异常.需要捕获吗(为什么)?应如何避免 ...

  5. 201521123103 《java学习笔记》 第十三周学习总结

    一.本周学习总结 以你喜欢的方式(思维导图.OneNote或其他)归纳总结多网络相关内容. 二.书面作业 1. 网络基础 1.1 比较ping www.baidu.com与ping cec.jmu.e ...

  6. Java课程设计 购物车系统（个人博客） 201521123052 蓝锦明

    1. 团队课程设计博客链接 课程设计团队博客 2. 个人负责模块或任务说明 (1)制作图形菜单引导界面 (2)定义各获取和输出类函数 3. 自己的代码提交记录截图 4. 自己负责模块或任务详细说明 i ...

  7. Mybatis第二篇【CRUD、分页】

    完成CRUD操作 我们在上一篇中已经简单知道了Mybatis是怎么使用的以及工作流程了,这次我们使用Mybatis来完成CRUD的操作,再次巩固Mybatis的开发步骤以及一些细节 包与类之间的结构 ...

  8. Oracle--新建用户以及赋予的权限

    1, 以dba方式登录Oracle 2, 创建用户,Users-->New ... 输入用户名和密码 3, 赋予connect/resource角色 4, 赋予该用户 对视图操作的相关权限 以下 ...

  9. Oracle单引号的用法-转义

    在ORACLE中,单引号有两个作用:  1:字符串是由单引号引用  2:转义. 单引号的使用是就近配对.而在单引号充当转义角色时相对不好理解 1.从第二个单引号开始被视为转义符,如果第二个单引号后面还 ...

  10. JPA关系映射之one-to-many和many-to-one

    one-to-many(一对多)和many-to-one(多对一)双向关联 假设部门与员工是一对多关系,反过来员工与部门就是多对一关系. Dept.java类 public class Dept im ...