jQuery 移入显示div，移出当前div，移入到另一个div还是显示。
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还是显示。的更多相关文章
- 多个DIV让float:left属性，最后一个DIV填满剩余的部分
<DIV style="border:1px solid red; overflow:hidden;zoom:1;"> <DIV style='floa ...
- winform显示word、ppt和pdf，用一个控件显示
思路:都以pdf的格式展示,防止文件拷贝,所以要把word和ppt转换为pdf:展示用第三方组件O2S.Components.PDFView4NET.dll,破解版的下载链接:https://pan. ...
- checkbox下面的提示框 鼠标移入时显示，移出时隐藏
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 一个div在另一个div中水平垂直的方法
html <div id="main"> <div id="box"> 一个div在另一个div中垂直居中实现方法 </div&g ...
- 如何让一个div居于页面正中间
如何让一个div居于页面正中间 如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,le ...
- jQuery事件-div的显示隐藏及鼠标的移入移出
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
- Sublime Text 如何一个代码双屏显示代码上下部分？
Sublime Text 如何一个代码双屏显示代码上下部分? sublime text如何一个代码双屏显示代码上下部分 先显示2行实图 把想要分屏显示的文件,打开新窗口,然后再拖过去就可以了. 快捷操 ...
- js或jquery实现点击某个按钮或元素显示div,点击页面其他任何地方隐藏div
点击某个元素显示div,点击页面其他任何地方隐藏div,可用javascript和jquery两种方法实现: 一:javascript实现方法技巧<script>//定义stopPropa ...
- 使一个div始终显示在页面中间
使一个div始终显示在页面中间 假设我们有一个div层:<div id=”myDiv”></div> 首先,我们用css来控制它在水平上始终居中,那么我们的css代码应该是这样 ...
- jQuery 学习笔记3 点击弹出一个div并允许拖拽移动
这里我看了下http://qings.blog.51cto.com/4857138/998878/ 的文章,感谢他的分享. 首先我们有一个a标签和一个div,div默认是不显示的,当用户点击时改为显示 ...
随机推荐
- wildfly 21的domain配置
目录 简介 wildfly模式简介 domain controller的配置 Host controller的配置文件 忽略域范围的资源 Server groups Servers 总结 简介 wil ...
- 利用xlutils第三方库复制excel模板
Python之利用第三方库套用excel模板,模板的样子假设如下: 现在要用这个模板,并且在"第二行第二列"的下方填入内容: #!usr/bin/python3 # -*-codi ...
- CCNP之OSPF实验报告
OSPF实验报告 一.实验要求 1.R4为ISP,其上只能配置IP地址:R4与其它所有直连设备间使用公有IP2.R3--R5/6/7为MGRE环境,R3为中心站点3.整个OSPF环境IP地址为172. ...
- Demo分享丨看ModelArts与HiLens是如何让车自己跑起来的
摘要:基于HiLens Kit已经基本开发完成,可部署到HiLens Kit,模型的选择为基于DarkNet53的YOLOv3模型,权重为基于COCO2014训练的数据集,而车道线的检测是基于Open ...
- 磁盘IO工作机制
磁盘IO工作机制 ref: <深入分析java web 技术内幕> by:许令波 几种访问文件的方式 文件读取和写入的 IO 操作都是调用操作系统提供的接口,因为磁盘设备是由操作系统管理的 ...
- [leetcode]205. Isomorphic Strings同构字符串
哈希表可以用ASCII码数组来实现,可以更快 public boolean isIsomorphic(String s, String t) { /* 思路是记录下每个字符出现的位置,当有重复时,检查 ...
- 吞食鱼2(FeedingFrenzyTwo) 修改器
吞食鱼2(FeedingFrenzyTwo) 修改器 童年回忆系列.小时候特别喜欢玩这类游戏,软件不大,很慢的网速也不会下载太久,然后对配置要求不高,很破的电脑也可以玩得很开心.不过也有糟心的时候啊, ...
- Hbase集群模式搭建
1.官网下载hbase安装包 这里不做赘述. 2.解压---直接tar -zxvf xxxx 3.配置hbase集群,要修改3个文件(首先zk集群已经安装好了) 注意:要把hadoop的hdfs-si ...
- js--数组的every()和some()方法检测数组是否满足条件的使用介绍
前言 阅读本文之前先来思考一个问题,如何如实现判断一个数组中是否存在满足条件的元素,如何去判断数组中是否全部元素都满足判断条件,这里可能能想到使用for循环遍历数组,if()判断每一项是否符合条件,同 ...
- INNER JOIN、LEFT JOIN、RIGHT JOIN、FULL JOIN 的使用和区别
INNER JOIN:如果表中有至少一个匹配,则返回行 LEFT JOIN:即使右表中没有匹配,也从左表返回所有的行 RIGHT JOIN:即使左表中没有匹配,也从右表返回所有的行 FULL JOIN ...