jQuery 移入移出 操作div

 1 <style type="text/css">
2 .box{
3 position: relative;
4 }
5 .box1{
6 width: 80px;
7 height: 80px;
8 border: 1px solid red;
9 }
10 .box2{
11 width: 200px;
12 height: 200px;
13 background-color: blue;
14 position: absolute;
15 top: 0;
16 left: 100px;
17 display: none;
18 }
19 </style>
20
21 <body>
22 <div class="m-5 box">
23 <div class="box1">
24
25 </div>
26 <div class="box2">
27
28 </div>
29 </div>
30 <script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
31 <script type="text/javascript">
32 $(function(){
33 var timer;
34 $(".box1").hover(function(){
35 $(".box2").stop().fadeIn();
36 clearInterval(timer);
37 },function(){
38 timer = setTimeout(function(){
39 $(".box2").stop().fadeOut();
40 },500)
41 })
42
43 var that;
44 $(".box2").hover(function(){
45 that = $(this);
46 that.stop().fadeIn();
47 clearInterval(timer);
48 },function(){
49 timer = setTimeout(function(){
50 that.stop().fadeOut();
51 },500)
52 })
53 })
54 </script>
55 </body>

效果如下:

jQuery 移入显示div,移出当前div,移入到另一个div还是显示。的更多相关文章

  1. 多个DIV让float:left属性,最后一个DIV填满剩余的部分

    <DIV style="border:1px solid red; overflow:hidden;zoom:1;">      <DIV style='floa ...

  2. winform显示word、ppt和pdf,用一个控件显示

    思路:都以pdf的格式展示,防止文件拷贝,所以要把word和ppt转换为pdf:展示用第三方组件O2S.Components.PDFView4NET.dll,破解版的下载链接:https://pan. ...

  3. checkbox下面的提示框 鼠标移入时显示,移出时隐藏

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. 一个div在另一个div中水平垂直的方法

    html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...

  5. 如何让一个div居于页面正中间

    如何让一个div居于页面正中间 如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,le ...

  6. jQuery事件-div的显示隐藏及鼠标的移入移出

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

  7. Sublime Text 如何一个代码双屏显示代码上下部分?

    Sublime Text 如何一个代码双屏显示代码上下部分? sublime text如何一个代码双屏显示代码上下部分 先显示2行实图 把想要分屏显示的文件,打开新窗口,然后再拖过去就可以了. 快捷操 ...

  8. js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div

    点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...

  9. 使一个div始终显示在页面中间

    使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...

  10. jQuery 学习笔记3 点击弹出一个div并允许拖拽移动

    这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...

随机推荐

  1. Arduino PROGMEM 从程序空间读取float值的方法

    方法: 使用avr-libc提供的宏定义: #define pgm_read_float_near(address_short) __LPM_float((uint16_t)(address_shor ...

  2. 论文阅读: A Review of Robot Learning for Manipulation: Challenges, Representations, and Algorithms

    机器人学习操纵综述:挑战,表示形式和算法 1.介绍 因此,研究人员专注于机器人应如何学习操纵周围世界的问题. 这项研究的范围很广,从学习个人操作技巧到人类演示,再到学习适用于高级计划的操作任务的抽象描 ...

  3. C#注册OCX控件

    注意 COM组件注册到注册表中的位置,是CLSID还是TypeLib 注册方法 代码执行 //声明注册方法 [DllImport("C:\\Windows\\barcodex.ocx&quo ...

  4. 简述java多态

    一.多态性: 1.java实现多态的前提:继承.覆写: 2.覆写调用的前提:看new是哪个类的对象,而后看方法是否被子类覆写,若覆写则调用覆写的方法,若没覆写则调用父类的方法: 二.多态性组成: 1方 ...

  5. Above the Median

    http://www.forioi.com/p/3212 农夫约翰把他的N(1<=N<=1e5)奶牛排在一排来衡量他们的高度,牛i有:高度H_I(1<=H_I<=1e9)纳米– ...

  6. window下运行nginx出现nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a socket in a way forbidden by its access permissions)

    做谷粒学院项目,用nginx出现nginx: [emerg] bind() to 0.0.0.0:80 failed (10013: An attempt was made to access a s ...

  7. Npoi XWPF Word 导出时插入图片无法显示 bug 完美解决

    一.来自客户的需求 最近客户来个新需求生成一个word 标签纸,并且需要在标签纸上插入一个logo,并且将erp 中的数据取出来自动写在文档上,不由得淡淡一笑,这不难呀! 于是乎我就写下了这样的代码: ...

  8. ORA-39700: database must be opened with UPGRADE option【转】

    1. 错误 数据库升级后(从11.2.0.1升级到11.2.0.4)启动报错 SQL> startup ORACLE instance started.   Total System Globa ...

  9. .netcore 急速接入第三方登录,不看后悔

    新年新气象,趁着新年的喜庆,肝了十来天,终于发了第一版,希望大家喜欢. 如果有不喜欢看文字的童鞋,可以直接看下面的地址体验一下: https://oauthlogin.net/ 前言 此次带来得这个小 ...

  10. js 判断用户是手机端还是电脑端访问

    通过userAgent 判断,网页可以直接使用 navigation对象 node端 可以通过请求头的 ctx.request.header['user-agent'] const browser = ...