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默认是不显示的,当用户点击时改为显示 ...
随机推荐
- JDK8新特性详解（二）
Stream流的使用 流操作是Java8提供一个重要新特性,它允许开发人员以声明性方式处理集合,其核心类库主要改进了对集合类的 API和新增Stream操作.Stream类中每一个方法都对应集合上的一 ...
- 学习JUC源码（3）——Condition等待队列（源码分析结合图文理解）
前言 在Java多线程中的wait/notify通信模式结尾就已经介绍过,Java线程之间有两种种等待/通知模式,在那篇博文中是利用Object监视器的方法(wait(),notify().notif ...
- .Net Core的简单单元测试基于Mock和自定义
首先创建 使用mock 外部依赖一般用Mock 模拟 下载包 例如 3.1:首先先要使用MOCk来模拟测试方法需要的参数,这一步为 Arrange; 简单的模拟 var mock = new Mock ...
- 安装篇一：安装VMware12
#1.安装VMware12 前提:安装不了的解决办法(进入BIOS系统,把虚拟化技术那一项修改为enable) 说明:安装流程(自定义安装) #2.网络适配器设置 虚拟网络编 ...
- 微服务痛点-基于Dubbo + Seata的分布式事务(TCC模式)
前言 Seata 是一款开源的分布式事务解决方案,致力于提供高性能和简单易用的分布式事务服务.Seata 将为用户提供了 AT.TCC.SAGA 和 XA 事务模式,为用户打造一站式的分布式解决方案. ...
- js对比两个时间的大小
/** * 时间对比 开始=结束返回0;开始>结束返回-1;开始<结束返回1 */ function dateComparison(date1,date2){ var start =new ...
- 为了搞清楚类加载，竟然手撸JVM！
作者:小傅哥 博客:https://bugstack.cn Github:https://github.com/fuzhengwei/CodeGuide/wiki 沉淀.分享.成长,让自己和他人都能有 ...
- SpringBoot进阶教程(六十九)ApplicationContextAware
在某些特殊的情况下,Bean需要实现某个功能,但该功能必须借助于Spring容器才能实现,此时就必须让该Bean先获取Spring容器,然后借助于Spring容器实现该功能.为了让Bean获取它所在的 ...
- .NET 5 开源工作流框架elsa技术研究
今天假期第一天,研究了.NET 5开源工作流框架elsa,现在分享给大家. 一.框架简介 elsa是一个开源的.NET Standard 工作流框架,官方网站:https://elsa-workflo ...
- JavaScript 函数节流和函数去抖
概念 函数防抖(debounce) 当调用动作过n毫秒后,才会执行该动作,若在这n毫秒内又调用此动作则将重新计算执行时间 函数节流(throttle) 预先设定一个执行周期,当调用动作的时刻大于等于执 ...