<!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. 使用Node.js+Socket.IO搭建WebSocket实时应用【转载】

    原文:http://www.jianshu.com/p/d9b1273a93fd Web领域的实时推送技术,也被称作Realtime技术.这种技术要达到的目的是让用户不需要刷新浏览器就可以获得实时更新 ...

  2. HTML学习笔记 div布局及table布局案例 第三节 （原创）参考使用表

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [J2EE] 有关 PreparedStatement

    今天同事遇到一个问题,简言之,就是PreparedStatement的预编译究竟是怎么发挥作用的... 嘿嘿,说来惭愧,我以前就只知道PreparedStatement比Statement要好,要防S ...

  4. HTML5 文件上传

    这篇随笔主要引用https://juejin.im/post/59598ecf5188250d8d141fff,只用于自己学习,不对外宣传. FileList 对象和 file 对象 input[ty ...

  5. JavaScript正则表达式知识点

    通过学习imooc课程<JavaScript正则表达式>http://www.imooc.com/video/12539,对视频教学内容做一个知识整理. 一个正则表达式在线工具:http: ...

  6. Deploy .Net project automatically with MsBuild and MsDeploy (0)

    I will use a example of my project to show how to use MS Build and MS Deploy in a real project and s ...

  7. C#操纵Excel，此工作薄包含嵌入对象，Office 2007的设定方法

    C#操纵Excel,插入OLE对象时报“此工作薄包含嵌入对象,EXCEL可能无法从这些对象中删除个人信息.”, 如网上所述,Office 2003可以通过“菜单>>工具>>选项 ...

  8. Linux系列教程（二十）——Linux的shell概述以及如何执行脚本

    从这篇博客开始,我们将进入Linux的shell脚本的学习,这对于Linux学习爱好者而言是特别重要的一节,也是特别有意思的一节,shell 脚本就像我们知道的Java,php类似的编程语言一样,通过 ...

  9. Python中的三种数据结构

    Python中,有3种内建的数据结构:列表.元组和字典.1.列表     list是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目.列表中的项目.列表中的项目应该包括在方括号中,这 ...

  10. python 面对post分页爬虫

    分享一则对于网抓中面对post请求访问的页面或者在分页过程中需要post请求才可以访问的内容! 面的post请求的网址是不可以零参访问网址的,所以我们在网抓的过程中需要给请求传表单数据,下面看一下网页 ...