<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<title>Examples</title>

<meta name="description" content="">

<meta name="keywords" content="">

<link href="" rel="stylesheet">

<style>

    div{float:left;margin:20px;}

    #div1{width:100px;height:100px;background: #f00;}

    #div2{width:200px;height:200px;background:#ccc;display: none;}

</style>

<script type="text/javascript">

    window.onload=function(){

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

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

        var timer=null;

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

            clearTimeout(timer);

            oDiv2.style.display="block";

        }

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

           timer=setTimeout(function(){

                oDiv2.style.display="none";

            },500)

        }

    }

</script>

</head>

<body>

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

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

</body>

</html>

Js onmouseover和onmouseout小特效的更多相关文章

  1. JS:onmouseover 、onmouseout

    鼠标移动到P标签上时,改变文本和边框样式 <style type="text/css"> .onmouseover { color: red; border: 1px ...

  2. js onmouseover与onmouseout用法

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别

    疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...

  4. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

  5. javascript学习-原生javascript的小特效（改变透明度效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 ( 以下效果兼容IE5+ IE5-以下没有测试哦) 今天为大家演示的效果是一个div,鼠标经过的时候透明度为100%,鼠标移出的时 ...

  6. javascript学习-原生javascript的小特效（简单的运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 一:运动特效(主要是通过改变元素的left,right,height,width,opacity来达到运动的效果) 我们今天做一个 ...

  7. javascript学习-原生javascript的小特效（原生javascript实现链式运动）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  8. javascript学习-原生javascript的小特效（多个运动效果整理）

    以下代码就不详细解析了,在我之前的多个运动效果中已经解析好多次了,重复的地方这里就不说明了,有兴趣的童鞋可以去看看之前的文章<原生javascript的小特效> <!DOCTYPE ...

  9. 关于onmouseover和onmouseout的bug

    总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...

随机推荐

  1. yum install tree 出错primary.sqlite.bz2: [Errno -1] Metadata file does not match checks 解决办法

    Loaded plugins: fastestmirrorLoading mirror speeds from cached hostfilehttp://ftp.sjtu.edu.cn/centos ...

  2. ppc_85xx-gcc -shared -fPIC liberr.c -o liberr.so

    fPIC作用于编译阶段,告诉编译器产生与位置无关代码(Position-Independent Code),   则产生的代码中,没有绝对地址,所有使用相对地址.故而代码能够被载入器载入到内存的随意 ...

  3. 网络学习之OSI七层协议和TCP协议

    OSI七层简单介绍 应用层:提供操作系统和应用程序的接口 表示层:表示数据如何加密.如何压缩的 会话层:将不同应用程序数据分离 传输层:提供可靠和不可靠的数据传输和重传.纠错的功能 网络层:提供IP地 ...

  4. samba add new smbpasswd & recycle

    建立新账号(XXXXX)的范列: sudo useradd XXXXX -m   #建立本机用户且home下建文件夹 sudo smbpasswd XXXXX -a   #建立samba用戶且设定密码 ...

  5. NYOJ 55 懒省事的小明(哈弗曼树)

    懒省事的小明 时间限制:3000 ms  |  内存限制:65535 KB 难度:3 描写叙述       小明非常想吃果子,正好果园果子熟了. 在果园里,小明已经将全部的果子打了下来,并且按果子的不 ...

  6. asm volatile (&quot;B .&quot;)

    在开发中,我们常常会有有这种需求,就是在某段代码处開始,一步一步往下跟踪调试,有人说加个while(1)循环,事实上这个循环增加后,其后边的代码就会被优化掉,达不到我们的目的,更好的办法是在须要的地方 ...

  7. tomcat的HTTPS

    完美配置Tomcat的HTTPS 博客分类: Tomcat HTTPS   Tomcat配置HTTPS的文章到处都有,过程也比较简单,随后文中会转一段过来. 但对于启用APR情况下报异常“java.l ...

  8. IOS-Storyboard控制器切换之TabBar(3)

    TabBar与Push相反,他以底部为导航 以头部为内容区域,如图: 打开storyboard文件,创建一个UITabBarController文件到画板中,默认带了2个 UIViewControll ...

  9. ArcGIS中生成蜂窝多边形算法解析

    近来有不少同学.都有问我关于蜂窝多边形的问题.也就是正六边形,也就是以下这个东东: 一般的问答模式例如以下: 亲们问:ArcGIS里面那个工具能够做这个东东? 虾神答:额,没有原生的工具. 亲们问:那 ...

  10. VS2010打开2012项目（转载）

    原文出处:http://www.cnblogs.com/johnsony/p/Version2012To2010.html vs2012 出来了,但是MS还是一如既往的向上兼容. 废话不多说,直接主题 ...