<!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. u启动为苹果笔记本重装win7系统教程

    准备更换系统的苹果笔记本一台!   上述需要准备的东西均准备好以后我们就开始今天的教程了!!   首先,将已经制作好启动盘的u启动u盘插入到苹果笔记本上的usb插口,然后开机!   由于苹果笔记本电脑 ...

  2. jq 常用手册

    1.替换标签 $("img[src='/_layouts/images/lstbulet.gif']").attr("src", "/huadong/ ...

  3. Angularjs1.x 项目结构

    大部分的项目结构是以 directives , service, controller 为基础来搭建的项目架构的,但这里更偏向于以应用场景来进行项目架构,因此这里的文件夹结构可能与您之前遇到的结构不同 ...

  4. spring中编程式事务控制

    step1:配置xml文件 <!-- 事务管理bean --> <bean id="transactionManager" class="org.spr ...

  5. 使用 BenchmarkDotnet 测试代码性能 【Win10】单元测试中捕获异步方法的指定异常

    先来点题外话,清明节前把工作辞了(去 tm 的垃圾团队,各种拉帮结派.勾心斗角).这次找工作就得慢慢找了,不能急了,希望能找到个好团队,好岗位吧.顺便这段时间也算是比较闲,也能学习一下和填掉手上的坑. ...

  6. HTML5+CSS3设计界面

    近期在做一个关于房屋装修的手机上的项目,前台是用H5+C3完毕的,挂在微信上.全部相对来说不是非常难. 这段时间通过敲Html5+Css3.分享一些自己觉得值得学习的知识. 都非常easy.自己操作一 ...

  7. uva 10765 Doves and Bombs（割顶）

     题意:给定一个n个点的连通的无向图,一个点的"鸽子值"定义为将它从图中删去后连通块的个数.求每一个点的"鸽子值". 思路dfs检查每一个点是否为割顶,并标 ...

  8. Highcharts数据表示(3)

    Highcharts数据表示(3) 採用对象数组的形式,能够明白节点上每一个项目的值.可是当节点较多时,会造成大量的冗余代码. 假设不写配置项名称,对象数组就能够简化二维数组.形式例如以下: data ...

  9. ACdream区域赛指导赛之手速赛系列(5) 题解

    A - Problem A Time Limit: 2000/1000MS (Java/Others) Memory Limit: 128000/64000KB (Java/Others) Submi ...

  10. HTTP要点概述：七，编码，压缩传输，分块传输

    一,编码: HTTP 在传输数据时可以按照数据原貌直接传输,但也可以在传输过程中通过编码提升传输速率.通过在传输时编码,能有效地处理大量的访问请求.但是,编码的操作需要计算机来完成,因此会消耗更多的 ...