<!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. 洛谷 P1404 平均数

    P1404 平均数 题目描述 给一个长度为n的数列,我们需要找出该数列的一个子串,使得子串平均数最大化,并且子串长度>=m. 输入输出格式 输入格式: N+1行, 第一行两个整数n和m 接下来n ...

  2. 携程Apollo（阿波罗）配置中心使用Google代码风格文件（在Eclipse使用Google代码风格）（配合阿里巴巴代码规约快速设置）

    Apollo默认使用了Google的代码风格,文件放在这里: https://github.com/ctripcorp/apollo/tree/master/apollo-buildtools/sty ...

  3. Servlet的服务端响应

    以下内容引用自http://wiki.jikexueyuan.com/project/servlet/server-response.html: 当一个Web服务器对浏览器响应一个HTTP请求时,响应 ...

  4. Systemtap工具查看系统资源使用

    http://www.xbwolf.com/507 http://blog.csdn.net/kafeiflynn/article/details/6429976 安装步骤yum install sy ...

  5. SSLStrip 终极版 —— location 瞒天过海

    之前介绍了 HTTPS 前端劫持 的方案,尽管非常有趣.然而现实却并不理想. 其唯一.也是最大的缺陷.就是无法阻止脚本跳转.若是没有这个缺陷,那就非常完美了 -- 当然也就没有必要写这篇文章了. 说究 ...

  6. $.extent()的理解

    $.extend()主要是用来扩展插件的,所谓的插件就是封装好的函数或者方法,可以直接调用. $.extend()与$.fn.extend()(或者写成$.prototype.extend()或者jq ...

  7. .a 文件解析

    首先先准备一个静态库.a文件,比如叫staticLibrary.a,放在桌面的test目录里. 分离arch 首先先file一下staticLibrary.a,看一下该文件包含几种arch. ~ cd ...

  8. 修改mysql root密码

    mysql密码丢失后,在mysql命令行下执行如下命令,即可将root用户密码清空: mysqld_safe --skip-grant-tables& mysql修改密码 mysql修改,可在 ...

  9. 怎样在win8系统下建立wifi热点

     2012年10月26日,微软正式推出Windows 8操作系统,不少用户也都升级到了最新的Win8.大家知道.在Win7系统下,我们非常方便的就在命令提示符下建立了WIFI热点.那么Win8上是 ...

  10. CF#315 C

    #include <cstdio> #include <iostream> #include <algorithm> #include <queue> ...