<!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. 企业级memcached部署(session共享)

    服务端部署 第一个里程碑:安装依赖关系 Memcache用到了libevent这个库用于Socket的处理. [root@nfs01 ~]# yum install libevent libevent ...

  2. ⑿bootstrap组件 缩略图 警告框 进度条 基础案例

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

  3. smm框架整合实现登录功能

    一.准备所需的jar包 1.1所需jar包 1.Spring框架jar包 2.Mybatis框架jar包 3.Spring的AOP事务jar包 4.Mybatis整合Spring中间件jar包 5.a ...

  4. struts2中struts.xml配置文件详解

    struts.xml的常用配置 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts ...

  5. Ubuntu & Docker & Consul & Fabio & ASP.NET Core 2.0 微服务跨平台实践

    相关博文: Ubuntu 简单安装 Docker Mac OS.Ubuntu 安装及使用 Consul Consul 服务注册与服务发现 Fabio 安装和简单使用 阅读目录: Docker 运行 C ...

  6. linux下mysql启动出错

    1.刚安装完就启动出错,是因为没有开msql服务,开启即可,service mysql start 2.MySQL: mysql is not running but lock exists rm / ...

  7. MarkdownPad2使用高亮插件

    MarkdownPad 2有插入代码块的功能,但样式却不尽人意,但又不想换个编辑器,找了挺多相关资料,最后在MarkdownPad 2集成prettify高亮插件. 如下相关资料: [HTML] Pr ...

  8. .net core2.0下使用Identity改用dapper存储数据

    前言. 已经好多天没写博客了,鉴于空闲无聊之时又兴起想写写博客,也当是给自己做个笔记.过了这么些天,我的文笔还是依然那么烂就请多多谅解了.今天主要是分享一下在使用.net core2.0下的实际遇到的 ...

  9. iOS多线程--深度解析

    多线程 你们项目中为什么多线程用GCD而不用NSOperation呢? 你有没有发现国外的大牛他们多线程都是用NSOperation? 你能告诉我他们这样做的理由吗? 关系: ①:先搞清两者的关系,N ...

  10. Eclipse中代码整体左移，右移快捷键

    1.向右:将要移动的代码选中,然后按TAB键2.向左:将要移动的代码选中,然后按SHIFT+TAB键