<!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. 在 Oracle Linux 上使用 DTrace

    作者:Richard Friedman 简要介绍适用于 Oracle Linux 的 DTrace 探测器和提供程序,以及与 Oracle Solaris 中 DTrace 探测器和提供程序的区别.还 ...

  2. linux 虚拟网卡

    linux中可以通过一个物理网卡,模拟出多个虚拟网卡,并在网卡中配置ip. 下面做一个实验. 实验描述: 我们有server A (ip 10.79.148.205),server B (10.79. ...

  3. hibernate之多对一单向关联

    一个工作组(Group)里能够有多个用户(User),一个User仅仅属于一个Group,这是典型的多对一的关系. 在多对一的关系中正确的数据库设计是在多的这方(在这里是User这方)加一个Group ...

  4. 【Hibernate学习】 ——ORM（一）

    Hibernate是一种能实现ORM的框架. ORM即Object Relational Mapping.对象关系映射.也就是将关系数据库中表的数据映射成为对象.也就是说将表与表之间的操作映射成对象与 ...

  5. iOS开发——基础篇——get和post请求的区别

    HTTP 定义了与服务器交互的不同方法,最常用的有4种,Get.Post.Put.Delete,如果我换一下顺序就好记了,Put(增),Delete(删),Post(改),Get(查),即增删改查,下 ...

  6. where 1=1影响效率以及having和where的区别

    低效的“WHERE 1=1” 网上有不少人提出过类似的问题:“看到有人写了WHERE 1=1这样的SQL,到底是什么意 思?”. 其实使用这种用法的开发人员一般都是在使用动态组装的SQL. 让我们想像 ...

  7. Codeforces Round #311 (Div. 2) D - Vitaly and Cycle

    D. Vitaly and Cycle time limit per test 1 second memory limit per test 256 megabytes input standard ...

  8. 500 OOPS: vsftpd: refusing to run with writable root inside chroot () 不能上传文件和文件夹

    500 OOPS: vsftpd: refusing to run with writable root inside chroot () 问题的是因为用户的根目录可写,并且使用了chroot限制,而 ...

  9. [LeetCode] Construct Binary Tree from Inorder and Pretorder Traversal

    Given preorder and inorder traversal of a tree, construct the binary tree. Note:You may assume that ...

  10. python库学习笔记——re库：正则表达式入门（一）

    什么是正则表达式? 我们在处理文本文件的时候,会按照某种规则查找某些特定的字符串.比方我们希望从一堆电子档案中找到人员的电话号码整理成通讯录.于是,我们可以利用特定字符串的规律编程获得我们想要的信息. ...