鼠标移动到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. 自己动手编译Android(LineageOS)源码

    准备 设备:红米3s 设备代号:land Android版本:7.1.1 源码提供:Lineage PC配置: 系统:Ubuntu16.04 x64 至少12G RAM 至少80GB 剩余硬盘空间 良 ...

  2. 死磕 java集合之ConcurrentLinkedQueue源码分析

    问题 (1)ConcurrentLinkedQueue是阻塞队列吗? (2)ConcurrentLinkedQueue如何保证并发安全? (3)ConcurrentLinkedQueue能用于线程池吗 ...

  3. 【我们一起写框架】C#的AOP框架

    前言 AOP,大家都是听过的,它是一种面向切面的设计模式. 不过AOP虽然是被称为设计模式,但我们应该很少能看到AOP设计的框架.为什么呢? 因为,AOP单独设计的框架几乎是无法使用的.普遍的情况是, ...

  4. ArcGIS API For Javascript_4.8-渲染器SimpleRenderer

    SimpleRenderer require(["esri/renderers/SimpleRenderer"], function(SimpleRenderer) { /* co ...

  5. GitLab11.3.9 使用 Crowd3.3.2 的帐号实现 SSO 单点登录，以及GitLab配置腾讯企业邮箱

    GitLab11.3.9 的安装方法: 点击查看.   Crowd3.3.2 的安装方法:点击查看.   需要先在 Crowd 创建应用程序,参考 <Docker 创建 Crowd3.3.2 以 ...

  6. July 06th. 2018, Week 27th. Friday

    Life has no limitations, except the ones you make. 生命无限,除非你自我设限. From Les Brown. There would be no l ...

  7. missing requires of libmysqlclient.so.18()(64bit)

    错误提示安装依赖的库文件没有找到: libmysqlclient.so.18()(64bit)   解决方法是这样的:   安装mysql-community-libs-compat-5.7.18-1 ...

  8. vue 中 vue-router、transition、keep-alive 怎么结合使用？

    <transition :name="name" mode="out-in" name="fade"> <keep-ali ...

  9. python接口自动化（六）--发送get请求接口（详解）

    简介 如果想用python做接口测试,我们首先有不得不了解和学习的模块.它就是第三方模块:Requests. 虽然Python内置的urllib模块,用于访问网络资源.但是,它用起来比较麻烦,而且,缺 ...

  10. 【工利其器】必会工具之（二）Android开发者官网篇

    前言 当刚开始踏入Android程序员这个行业的时候,想必绝大多数的人都和笔者一样,热血沸腾,激情四射,买了很多讲解Android开发的书籍.当开发某个功能需要学习某方面知识的时候,大家又成了“面向百 ...