<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <style >

        #div1{width: 400px;height: 40px;background-color: red;}

        #div2{width: 250px;height: 30px;background-color: blue;margin: 10px;display: none;}

    </style>

    <script>

        window.onload=function (){

            var oDiv1=document.getElementById("div1");

            var oDiv2=document.getElementById("div2");

            var timer=null;

            oDiv1.onmouseover=oDiv2.onmouseover=function (){

                oDiv2.style.display="block";

                clearInterval(timer);

            };

            oDiv2.onmouseout=oDiv1.onmouseout=function(){

                timer=setTimeout(function (){

                    oDiv2.style.display='none';

                }, 300);

            }

        }

    </script>

</head>

<body>

<div id="div1"></div>

<div id="div2"></div>

</body>

</html>

             

鼠标移入 移出div div会消失的处理的更多相关文章

  1. div展现与收起效果（鼠标移入移出）

    效果图: 移入: 移出: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  2. 函数传参，改变Div任意属性的值&&图片列表：鼠标移入/移出改变图片透明度

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

  3. CSS3鼠标移入移出图片生成随机动画

    今天分享使用html+css3+少量jquery实现鼠标移入移出图片生成随机动画,我们先看最终效果图(截图为静态效果,做出来可是动态的哟) 左右旋转 上下移动 缩放 由于时间关系我就不一步步解析各段代 ...

  4. js鼠标移入移出事件会被子元素触发解决方法

    问题:js写了一个鼠标移入移出事件,但是发现会被内部子元素不断的触发 解决方法:建立一个空的div定位到需要触发的位置,然后设置大小和触发范围一样,最后将事件写在空的div上.

  5. Vue 鼠标移入移出事件

    Vue 中鼠标移入移出事件 @mouseover和@mouseleave 然后绑定style   现在开始代码示例 <template> <div class="pc&qu ...

  6. js鼠标移入移出效果【原】

    <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <met ...

  7. jquery事件一 ---鼠标移入移出

    比较一下几个jquery事件的区别 mouseover() 鼠标进入(进入子元素也触发) mouseout() 鼠标离开(离开子元素也触发) mouseenter() 鼠标进入(进入子元素不触发) m ...

  8. Vue中通过鼠标移入移出来添加或取消class样式（active）

     基础知识: 先写一下vue中鼠标移入移出的基础知识,移入的触发事件是 @mouseenter,移出的触发事件是@mouseleave,知道这两个方法就简单了 基础知识的例子 <div clas ...

  9. onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法

    鼠标移入移出图片切换很常见的,那我们就来说说他的写法 第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/do ...

  10. js(jquery)鼠标移入移出事件时，出现闪烁、隐藏显示隐藏显示不停切换的情况

    <script> $(".guanzhu").hover(function(){ $(".weixinTop").show(); },functio ...

随机推荐

  1. Tabhost嵌套以及Tab中多个Activity跳转的实现

    做了一个demo,先看看效果图: 源码 如下: () DoubleTabHost package yy.android.tab; import android.app.TabActivity; imp ...

  2. C#反射之基础应用

    今天把反射的东西整理了一下 , 提供了最全面的东西 , 当然也是基础的东西 ,在学好了这一切的基础上 , 大家可以学习反射的具体插件等应用 首先我们建立一个类库 , 将它生成为 reflectPrj  ...

  3. [C# 网络编程系列]专题十：实现简单的邮件收发器

    转自:http://www.cnblogs.com/zhili/archive/2012/09/24/2689892.html 引言: 在我们的平常工作中,邮件的发送和接收应该是我们经常要使用到的功能 ...

  4. selenium webdriver 环境搭建--java

    selenium java环境的安装可以分为三个部分:jdk.eclipse和selenium. jdk jdk(java development kit)是sun公司针对java开发人员的产品,是整 ...

  5. Red5空项目的理解

    在经过三天的苦恼之后,我终于对Red5的工作流程有点了解了.这样一来对要做的项目总算不会太瞎了.出于个人感受,认为下面所讲述的内容对初学者理解Red5以及基于Red5开发有很大的帮助,因此记录下来. ...

  6. 各个平台 如何安装 Ruby 和 RubyGems

    原文地址:http://cloudfoundry-doc.csdn.net/frameworks/ruby/installing-ruby.html Last Updated: 2012-11-01 ...

  7. [SAM4N学习笔记]按键程序(查询方式)

    一.准备工作:      将上一节搭建的工程复制一份,命名为"5.key scanf".这一节主要讲如何使用SAM4N的GPIO输入功能,实现按键的输入. 二.程序编写:      ...

  8. c语言的label后面不能直接跟变量申明

    ; goto JUMP; printf("x is : %d\n",x); JUMP: ; <=== 错误,lable后面不能申明变量,只能是表达式语句(statement) ...

  9. mysql 备份与还原

    http://dev.yesky.com/281/35291281.shtml 每一种逻辑错误发生的概率都极低,但是当多种可能性叠加的时候,小概率事件就 放大成很大的安全隐患,这时候备份的必要性就凸显 ...

  10. 1 weekend110的复习 + hadoop中的序列化机制 + 流量求和mr程序开发

    以上是,weekend110的yarn的job提交流程源码分析的复习总结 下面呢,来讲weekend110的hadoop中的序列化机制 1363157985066      13726230503  ...