鼠标移动到P标签上时，改变文本和边框样式

        <style type="text/css">

            .onmouseover {

                color: red;

                border: 1px solid blue;

                cursor: hand;

        </style>

        <script type="text/javascript">

            function over() {

                var p = document.getElementById("p");

                //选择器className修改。

                p.className = "onmouseover";

            }

            function out() {

                var p = document.getElementById("p");

                p.className = "";

            }

        </script>

    <body>

        <p onmouseover="over()" onmouseout="out()" id="p">鼠标移动到P标签上时，改变文本和边框样式</p>

    </body>

JS:onmouseover 、onmouseout的更多相关文章

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

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

  2. HTML事件(onclick、onmouseover、onmouseout、this)

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

  3. JQuery 之事件中的 ----- hover 与 onmouseover 、onmouseout 联系

    hover([over,]out) 一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法.这是一个自定义的方法,它为频繁使用的任务提供了一种“保持在其中”的状态. 当鼠标移动到一个匹配的元素 ...

  4. 第8天：javascriptDOM小 案例、onmouseover 、onmouseout

    案例 为元素注册点击事件,弹出对话框 <input type="button" id="btn" value="开发分离"> & ...

  5. 使用CSS如何悬停背景颜色变色 onmouseover、onmouseout

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. js onmouseover与onmouseout用法

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

  7. Js onmouseover和onmouseout小特效

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  8. 十六天 css汇总、js汇总、dom汇总

    1.css补充之  后台管理界面  顶部导航栏.左边菜单栏.右边内容栏固定在屏幕相应位置 会有上下左右滚动条,设定窗口最小值,使页面不乱.注意overflow:auto要与position:absol ...

  9. 关于onmouseover和onmouseout的bug

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

随机推荐

  1. com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known server 报错问题

    com.netflix.discovery.shared.transport.TransportException: Cannot execute request on any known serve ...

  2. 一文带你了解 Spring 5.0 WebFlux 应用场景

    一.什么是 Spring WebFlux 下图截自 Spring Boot 官方网站: 结合上图,在了解 Spring WebFlux 之前,我们先来对比说说什么是 Spring MVC,这更有益我们 ...

  3. 你真的了解字典(Dictionary)吗?

    从一道亲身经历的面试题说起 半年前,我参加我现在所在公司的面试,面试官给了一道题,说有一个Y形的链表,知道起始节点,找出交叉节点. 为了便于描述,我把上面的那条线路称为线路1,下面的称为线路2. 思路 ...

  4. “==”、“equals()”、“hashcode()”之间的秘密

    前言 万丈高楼平地起,今天的聊点基础而又经常让人忽视的话题,比如“==”与“equals()”区别?为何当我们重写完"equals()"后也要有必要去重写"hashcod ...

  5. 补习系列(18)-springboot H2 迷你数据库

    目录 关于 H2 一.H2 用作本地数据库 1. 引入依赖: 2. 配置文件 3. 样例数据 二.H2 用于单元测试 1. 依赖包 2. 测试配置 3. 测试代码 小结 关于 H2 H2 数据库是一个 ...

  6. C# ASP.NET MVC:使用Cookie记住账号密码

    MVC记住账号密码 使用cookie操作 前端: <div> 用户名:<input type="text" id="UserName" val ...

  7. 在阿里云服务器中用IP连接SQLserver2014提示40,53错误

    在有些时候我们需要他人来连接我们的数据库,这个时候我们需要用我们本地的IP地址来连接,在连接的过程中可能会出现找不到网络路径提示40,53的错误 解决方案: 1.打开配置管理器 2.点开网络配置,点击 ...

  8. ES6数组扩展运算符

    1 扩展运算符的运用 (1)复制数组 数组是复合的数据类型,直接复制的话,只是复制了指向底层数据机构的指针,而不是克隆一个全新的数组; const a1=[1,2]; const a2= a1; a2 ...

  9. GreenDao的初次使用--号称Android最快的关系型数据库

    一.准备工作 1.项目build.gradle文件下的dependencies中引入插件: classpath 'org.greenrobot:greendao-gradle-plugin:3.2.1 ...

  10. 深入分析Java I/O 工作机制

    前言 :  I/O 问题是Web 应用中所面临的主要问题之一.而且是任何编程语言都无法回避的问题,是整个人机交互的核心. java 的I/O类操作在java.io 包下,将近80个子类, 大概可以分成 ...