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默认是不显示的,当用户点击时改为显示 ...
随机推荐
- Selenium Web元素定位方法
Selenium是用于Web应用测试的自动化测试框架,可以实现跨浏览器和跨平台的Web自动化测试.Selenium通过使用WebDriver API来控制web浏览器,每个浏览器都都有一个特定的Web ...
- 扫描条形码获取商品信息（iOS 开发）
一.导入ZBarSDK及其依赖库(这不是本文侧重点) 1.下载地址 https://github.com/bmorton/ZBarSDK 2.导入头文件 #import "Z ...
- Autofac官方文档翻译--二、解析服务--2隐式关系类型
Autofac 隐式关系类型 Autofac 支持自动解析特定类型,隐式支持组件与服务间的特殊关系.要充分利用这些关系,只需正常注册你的组件,但是在使用服务的组件或调用Resolve()进行类型解析时 ...
- AOP的姿势之 简化 MemoryCache 使用方式
0. 前言 之前写了几篇文章介绍了一些AOP的知识, 但是还没有亮出来AOP的姿势, 也许姿势漂亮一点, 大家会对AOP有点兴趣 内容大致会分为如下几篇:(毕竟人懒,一下子写完太累了,没有动力) AO ...
- Code Review 最佳实践
ref: Code review Best Practices 文章将了以下内容: 3w:why.what.when 进行 code review code review 之前的准备 执行 code ...
- 配置文件中配置集合类（Map、list）@Value注入map、List
spel表达式就是spring表达式.在java代码中,还有这种写法: @Value("#{'${auth.filter.exclude-urls}'.split(',')}") ...
- java动态代理实现与原理详细分析(转)
关于Java中的动态代理,我们首先需要了解的是一种常用的设计模式--代理模式,而对于代理,根据创建代理类的时间点,又可以分为静态代理和动态代理. 一.代理模式 代理模式是常用的java设计模式, ...
- Flash Player的终章——赠予它的挽歌
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 12月28日消息,微软已经确认Windows 10在下一次更新时将自动删除F ...
- Java Queue 队列
队列是一种先进先出的数据结构,队列中插入元素和删除元素分别位于队列的两端. 在Java中 队列实现类众多,本文不再赘述.本文探讨的是如何自定义队列实现类: 基于数组方式实现队列: 注意点: 当出队时队 ...
- java上下分页窗口流动布局
上下分页要用到 JSplitPane jSplitPane =new JSplitPane();//设定为拆分布局 效果图: show me code: import java.awt.event.C ...