<!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. JFileChooser 中文API

    javax.swing类 JFileChooser java.lang.Object java.awt.Component java.awt.Container javax.swing.JCompon ...

  2. NSA开发的工控ICS/SCADA态势感知开源工具Grassmarlin（附下载地址）

    工具简介 GRASSMARLIN是一款由美国国家安全局开发的,能够帮助运维工程师在IP网络上发现并编目监控和数据采集系统(SCADA)和工业控制系统(ICS)主机的开源软件工具,也被称为被动网络映射器 ...

  3. C++ - 库函数优先级队列(priority_queue)输出最小值 代码

    库函数优先级队列(priority_queue)输出最小值 代码 本文地址: http://blog.csdn.net/caroline_wendy 库函数优先级队列(priority_queue)的 ...

  4. ISkyShop B2B2C 商城系统V1.0正式版隆重公布

    ISkyShop核心开发团队结合7年电商开发经验,历经1年多时间的设计研发,于2014年6月12日隆重推出ISkyShop B2B2C 商城系统V1.0,B2B2C商城系统是ISkyShop独立自主研 ...

  5. STL之关联容器的映射底层

    STL的关联容器有set, map, multiset, multimap.用于实现它们的底层容器有划入标准的rb_tree和待增加标准的hashtable. 底层容器rb_tree为上层容器提供了一 ...

  6. ATM取款机模拟——数据结构课设

    今天帮人写的第二篇课设 . ;-) 机智的窝 要求:大概说一下吧,就是要创建一个用户(初始化一账户),模拟ATM的业务(取款,100的整数倍,改密               码,查剩余金额.等等,各 ...

  7. jquery验证插件validate自定义扩展

    <script src="${pageContext.request.contextPath}/resources/js/jquery-1.12.0.min.js" type ...

  8. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  9. SpringMVC学习指南-Spring框架

    Spring框架主要使用依赖注入.实际上,很多牛叉的框架如Google的Guice都是使用依赖注入. ------------------------------------------------- ...

  10. websphere修改jsp不生效的解决办法

    最近在给客户部署系统后,进行UAT测试的时候,发现一些小问题(是一些jsp文件),改好后,就进行增量发布了,可是后来在页面刷新的时候,怎么都是显示不出来效果,后来就把服务websphere重启后,页面 ...