文档章节

Jquery使用mouseenter和mouseleave实现鼠标经过弹出层且可以点击

深圳大道
 深圳大道
发布于 2016/12/29 15:38
字数 145
阅读 42
收藏 0
<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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/9986569

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
jQuery 事件:MouseOver/MouseOut vs MouseEnter/MouseLeave

Javascript 开发者经常用MouseOver和MouseOut事件来触发用户鼠标进入或者移出某个HTML元素的事件。对于任何试图使用这种方式处理的人来说,你知道这个方式还不错,但是你没有想到其实那样会有...

晨曦之光
2012/03/21
5.4K
0
对于鼠标是否点击的判断

JQuery中可不可以试用if来对鼠标的动作进行判断,是mouseenter还是click,因为我想在mouseenter的时候可以执行mouseleave的动作,但是click的时候就不用执行这个动作了...

yt果粒儿
2015/09/29
71
1
Java程序员从笨鸟到菜鸟之(九十)跟我学jquery(六)jquery中事件详解

由于jquery本身就是web客户端的有力帮手,所以事件对于它来说就显得尤为重要了,事件是脚本编程的灵魂. 所以此内容也是jQuery学习的重点。 在传统的javascript中,注册一个事件也是非常简单的...

长平狐
2012/11/12
56
0
jQuery零基础入门——(七)事件

《jQuery零基础入门》系列博文是在廖雪峰老师的博文基础上,可能补充了个人的理解和日常遇到的点,用我的理解表述出来,主干出处来自廖雪峰老师的技术分享。 我们在《零基础入门JavaScript》...

JandenMa
2018/07/27
20
0
使用jQuery快速高效制作网页交互特效——07 第七章 jQuery中的事件与动画

1、 jQuery中的事件: ●和WinForm一样,在网页中的交互也是需要事件来实现的,例如tab切换效果,可以通过鼠标单击事件来实现 ●jQuery事件是对JavaScript事件的封装,常用事件分类 ●基础事...

逆風〠飛翔
2018/08/07
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Less导入选项

Less 提供了CSS @import CSS规则的几个扩展,以提供更多的灵活性来处理外部文件。 语法: @import (keyword) "filename"; 以下是导入指令的相关详情: reference,使用较少的文件但不输出。 ...

凌兮洛
4分钟前
3
0
Docker下实现MySQL主从(读、写分离)同步配置

docker下实现两个(或多个)mysql容器的主、从数据库同步配置,首先要明白docker容器的相互通信关系,默认是使用的bridge模式: 也就是说,通过docker run命令创建docker容器是每个容器都有自己...

源哥L
14分钟前
8
0
一起来学Java8(三)——方法引用

在一起来学Java8(一)——函数式编程中有一个简单的函数式编程的例子: import java.util.function.Consumer;class Person { public static void sayHello(String name) { S...

猿敲月下码
33分钟前
15
0
读书笔记:深入理解ES6(十一)

第十一章 Promise与异步编程   Promise可以实现其他语言中类似Future和Deferred一样的功能,是另一种异步编程的选择,它既可以像事件和回调函数一样指定稍后执行的代码,也可以明确指示代码...

张森ZS
57分钟前
23
0
面试官,Java8 JVM内存结构变了,永久代到元空间

在文章《JVM之内存结构详解》中我们描述了Java7以前的JVM内存结构,但在Java8和以后版本中JVM的内存结构慢慢发生了变化。作为面试官如果你还不知道,那么面试过程中是不是有些露怯?作为面试...

程序新视界
今天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部