<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. NHibernate教程(8)--巧用组件

    本节内容 引入 方案1:直接添加 方案2:巧用组件 实例分析 结语 引入 通过前面7篇的学习,有点乏味了~~~这篇来学习一个技巧,大家一起想想如果我要在Customer类中实现一个Fullname属性 ...

  2. 全面解析for循环

    牛刀小试: for(var i = 0 ; i < 100; i++) {console.log(i);} var i = 0;//第一个代码段 i < 100; //第二个代码段 i++ ...

  3. Alpha个人总结

    一.我的问题: 1.第一章1.2.1 在软件的特殊性中说到,"大型软件有超过数百万行的源代码,上万个不同的文件,而软件工程师通常一次只能看到30-80行源代码,他们的智力.记忆力和常人差不多 ...

  4. 【集美大学1411_助教博客】团队作业1——团队展示&选题 成绩

    第一次团队作业已经新鲜出炉啦,各位同学请查收.截止日期前,全班都按时提交了作业,而且有的团队还提交了两次呢,下次不要这样啦~ 题目 团队作业1--团队展示&选题 回顾 个人作业1--四则运算题 ...

  5. Java201521123071《Java程序设计》第八周学习总结

    第八周-集合与泛型 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 1. <T extends Comparable>表示T是绑定类型(Compa ...

  6. eclipse ide for java ee developers与eclipse ide for java developers有什么区别

    前者集成了WTP,可用于j2ee开发,功能更完善

  7. 201521123007《Java程序设计》第10周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结异常与多线程相关内容. 补充上周异常 异常堆栈追踪:获得异常发生的根源 创建自己的异常 自定义异常类不是由Java系统监测到的异常, ...

  8. Eclipse: eclipse文本文件编码格式更改（GBK——UTF-8）

    Eclipse中设置编码的方式 Eclipse工 作空间(workspace)的缺省字符编码是操作系统缺省的编码,简体中文操作系统 (Windows XP.Windows 2000简体中文)的缺省编码 ...

  9. Winfrom 简单的安卓手机屏幕获取和安卓简单操作

    为啥我要做这个东西了,是因为经常要用投影演示app ,现在有很多这样的软件可以把手机界面投到电脑上 ,但都要安装,比如说360的手机助手,我又讨厌安装,于是就自己捣鼓了下 做了这个东西, 实现了以下简 ...

  10. sed命令基础

    sed是一种流编辑器,它是文本处理中非常中的工具,能够完美的配合正则表达式使用,功能不同凡响.处理时,把当前处理的行存储在临时缓冲区中,称为"模式空间"(pattern space ...