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默认是不显示的,当用户点击时改为显示 ...
随机推荐
- 谈谈hive中join下on和where
本文为博客园作者所写: 一寸HUI,个人博客地址:https://www.cnblogs.com/zsql/ 很多人如果先接触mysql的执行顺序(from ->on ->join -&g ...
- python序列（七）序列操作的常用内置函数
1.len(列表):返回:列表中的元素个数,同样适用于元组.字典.集合.字符串等. max(列表).min(列表):返回列表中的最大或最小元素同样适用于元组.字典.集合.range对象等. sum(列 ...
- mysql多个TimeStamp设置
mysql多个TimeStamp设置 2012-11-02 12:58 轩脉刃 阅读(39590) 评论(3) 编辑 收藏 timestamp设置默认值是Default CURRENT_TI ...
- C#自定义TemplateImage使用模板底图,运行时根据用户或产品信息生成海报图(1)
由于经常需要基于固定的一个模板底图,生成微信小程序分享用的海报图,如果每次都调用绘图函数,手动编写每个placeholder的填充,重复而且容易出错,因此,封装一个TemplateImage,用于填充 ...
- HBase内存配置及JVM优化
前言 本文从HBase的内存布局说起,先充分了解HBase的内存区的使用与分配,随后给出了不同业务场景下的读写内存分配规划,并指导如何分析业务的内存使用情况,以及在使用当中写内存Memstore及读内 ...
- Android驱动学习-内部机制_回顾binder框架关键点
内部机制_回顾binder框架关键点server注册服务时, 对每个服务都提供不同的ptr/cookie,在驱动程序里对每个服务都构造一个binder_node, 它也含有ptr/cookie cli ...
- http协议中的缓存机制
强缓存 - expires,服务器给客户端一个过期日期,如(2020-12-12),过了该时间,客户端请求服务器重新获取.存在问题:客户端与服务端存在时间差,会导致过期时间不准确 - Cache-co ...
- Access-Control-Allow-Headers等基础常识
跨源资源共享 (CORS) (或通俗地译为跨域资源共享)是一种机制,该机制使用附加的 HTTP 头来告诉浏览器,准许运行在一个源上的Web应用访问位于另一不同源选定的资源. 当一个Web应用发起一个与 ...
- Spring Cloud是什么鬼？
研究了一段时间Spring Boot了准备向Spring Cloud进发,公司架构和项目也全面拥抱了Spring Cloud.在使用了一段时间后发现Spring Cloud从技术架构上降低了对大型系统 ...
- jit编译原理
jit用以把程序全部或部分翻译成本地机器码,当需要装载某个类[通常是创建第一个对象时],编译器会先找到其.class文件,然后将该类的字节码装入内存. hotspot采用惰性评估法: 如果一段代码频繁 ...