<!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. 基于 Java 的开源网络爬虫框架 WebCollector

    原文:https://www.oschina.net/p/webcollector

  2. 使用maven时，如何修改JVM的配置参数；maven命令执行时到底消耗多少内存？

    maven是使用java启动的,因此依赖JVM,那么如何修改JVM参数? MAVEN_OPTS 在系统的环境变量中,设置MAVEN_OPTS,用以存放JVM的参数,具体设置的步骤,参数示例如下: MA ...

  3. log4j-over-slf4j.jar AND slf4j-log4j12.jar 依赖冲突解决方案

    使用maven构建项目时,如果项目中有log4j的依赖,在运行程序时可能会出现在同一个类中log4j-over-slf4j.jar和 slf4j-log4j12.jar冲突的问题: 项目报错内容为: ...

  4. Django学习系列之模板

    什么是django模板 模板是一个文本,用于分离文档的表现形式和内容,模板定义了占位符以及各种用于规范文档该如何显示的各部分基本逻辑(模板标签) 模板通常用于产生HTML 如何使用模板 创建一个Tem ...

  5. 使用带粒子效果的 CAEmitterLayer

    1.用CAEmitterLayer产生粒子效果 2.封装CAEmitterLayer 3.封装下雪.下雨的粒子效果控件 一.用CAEmitterLayer产生粒子效果 - (void)emitterL ...

  6. JspSmartUpload 实现上传

    2.save  作用:将所有上传文件保存到指定文件夹下,并返回保存的文件个数. 原型:public int save(String destPathName)  和public int save(St ...

  7. Canvas: trying to use a recycled bitmap android.graphics.Bitmap@XXX

    近期在做和图片相关显示的出现了一个问题,整理一下思路.分享出来给大家參考一下: Exception Type:java.lang.RuntimeException java.lang.RuntimeE ...

  8. MFC中SliderCtrl控件的使用

    在MFC中滑动条(CSliderCtrl)是个经常使用的控件,使用方法例如以下: 主要要方法有: 1.设置.取得滑动范围: void SetRange( int nMin, int nMax, BOO ...

  9. android MediaRecorder start failed：-38【转】

    本文转载自:http://blog.csdn.net/fnuwfnh/article/details/46698509 最近在学习android 录音方面的知识,发现在部分手机正常运行的APP,在华为 ...

  10. oracle 存储过程调用 执行

    oracle 存储过程调用 博客分类: 数据库相关   oracle存储过程 2011年02月11日 星期五 14:47 SQL中调用存储过程语句: call procedure_name(); 调用 ...