<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键字,关键词">
    <meta name="Description" content="描述和简介">
    <title>Title</title>
    <style type="text/css">
        *{margin:0;padding:0;}
        body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
        a{text-decoration:none;}
        img{border:none;}
        ol,ul{list-style:none;}
        #box1{height:200px;width:200px;background:pink;}
        #box2{height:200px;width:200px;background:yellow;}
    </style>
</head>
<body>
<div id="box1"></div>
<div id="box2"></div>
<script>
    var xiaochui=document.getElementById("box2");
   　 var dachui=document.getElementById("box1");
       dachui.onmouseover=function(){
       this.innerHTML="我被碰了一下";
       xiaochui.innerHTML="box1正在被碰"
       };
       dachui.onmouseout=function(){
       this.innerHTML="我们都没被碰";
       xiaochui.innerHTML="我们都没被碰"
       };
       xiaochui.onmouseover=function(){
       this.innerHTML="我正在被碰";
       dachui.innerHTML="box2正在被碰"
       };
       xiaochui.onmouseout=function(){
       this.innerHTML="我们都没被碰";
       dachui.innerHTML="我们都没被碰"
       }

</script>
</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> <head> <meta charset="utf-8"> <meta http ...

  3. JS事件之onmouseover 、onmouseout 与onmouseenter 、onmouseleave区别

    疫情过后回武汉的第一天打卡,今天偶然遇到一个问题onmouseover .onmouseout 与onmouseenter .onmouseleave这些事件的区别,也看了一些博客,感觉不是很清楚,所 ...

  4. 关于onmouseover和onmouseout的bug

    总结了一下关于使用onmouseover以及onmouseout会出现的bug 首先简单的布局: <div id="box"> <div>这是一个内容< ...

  5. onmouseover和onmouseout鼠标移入移出切换图片的几种实现方法

    鼠标移入移出图片切换很常见的,那我们就来说说他的写法 第一种方法,也是最简单的一种,在html:里就可实现 <img class="img" src="img/do ...

  6. [转载]js中return的用法

    一.返回控制与函数结果,语法为:return 表达式; 语句结束函数执行,返回调用函数,而且把表达式的值作为函数的结果 二.返回控制,无函数结果,语法为:return;  在大多数情况下,为事件处理函 ...

  7. js中this的用法

    经过近几周的模拟面试题,我查询了一些资料,今天就来说说,在js中this的用法吧.方法有四:第一,用作全局变量,第二,用作表该对象,第三,用作构造函数,第四,用作call和applay

  8. onmouseover和onmouseout的那些事

    这篇文章来自一个偶然...以前刚开始学习javascript事件的时候就被一个东西搞得晕头撞向的.就是一对名字很相近的事件.一组是onmouseover()和onmouseout().另一组就是onm ...

  9. JQuery之append和appendTo的区别，还有js中的appendChild用法

    JQuery之append和appendTo的区别 append()前面是要选择的对象,后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容且为Jquery对象,而后面是要选择的 ...

随机推荐

  1. IOS学习——iphone X的适配

    说实话,对于一个刚入门iOS两个月的新手而言,在拿到这个任务的时候整个人都是懵逼的,怎么做适配?哪些地方需要适配?该怎么做?一个个问题搞得头都大了. 首先,啥都不管,先在iPhone X上运行起来看看 ...

  2. JavaScript Function.arguments 属性详解

    语法 [functionObject.]arguments arguments属性是正在执行的函数的内置属性,返回该函数的arguments对象.arguments对象包含了调用该函数时所传入的实际参 ...

  3. js中的路由匹配

    routie插件:http://projects.jga.me/routie/ /** * 路由 * @example * routie( * { * '/':function(){ }, * '/m ...

  4. javascript中new操作符

    当代码var p= new Person("tom")执行时,其实内部做了如下几件事情: 1.创建一个空白对象(new Object()). 2.拷贝Person.prototyp ...

  5. BPF漫谈

    源起 最近看到国内两篇文章[1][2]先后翻译了就职于Netflix的性能分析大牛Brendan Gregg于2017年7月31日写的<Golang bcc/BPF Function Traci ...

  6. Python基础-注释-变量赋值

    一.注释 # 注释 \n 行分隔符 \ 继续上一行 '''   *** ''' 多行注释 二.基本规则 : 分开代码块(组)   头$尾 缩进块  语句代码块  用缩进深度区分 空行     用于分割 ...

  7. JS中有关数组Array的常用方法函数

    Array对象的方法主要有如下几种(我所知道的): concat()连接两个或多个数组,并返回结果,但是值得注意的是该方法并不改变数组本身,而仅仅返回一个数组连接的副本. push()在数组后面添加一 ...

  8. padding-使用必记

    前言 说起了padding可谓是盒子模型中最常用的一个属性,你真的了解padding吗?那我请问您设置padding会影响盒子的宽度与高度吗?也许好多人会回答padding会影响到盒子的宽度与高度.在 ...

  9. c# asp.net 多数组索引的解决方法

    本人今天做了一个功能 需要在一个类里用多个数组, 数组需要索引器来调用  一个数组 我查了msdn 一个类里面只能有一个this 索引器 那这么多数组如何构造索引呢 我在坛子里找到了解决之道 view ...

  10. [转载] Redis之七种武器

    转载自http://blog.nosqlfan.com/html/2942.html?ref=rediszt 长生剑.孔雀翎.碧玉刀.多情环.离别钩.霸王枪.拳头是古龙笔下的七种武器,而本文打算将Re ...