鼠标移动到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. OSPF 基础实验

    一.环境准备 1. 软件:GNS3 2. 路由:c7200 二.实验操作 实验要求: 1.掌握多区域的 OSPF 配置方法. 2.区别不同区域的路由. 3.掌握 OSPF 的路由汇总配置. 4.掌握  ...

  2. kubernetes实践之三：深入理解Pod对象

    一．Pod定义 最小部署单元 一组容器集合 一个pod中的容器共享网络命名空间 Pod是短暂的 二．Pod容器分类 基础容器 维护整个Pod的网络命名空间 初始化容器 先于业务容器开始执行,在应用启动 ...

  3. Dynamics 365 CE中使用FetchXML进行聚合运算

    微软动态CRM专家罗勇 ,回复328或者20190429可方便获取本文,同时可以在第一间得到我发布的最新博文信息,follow me! Dynamics 365 Customer Engagement ...

  4. ArcGIS JS API多线程克里金插值

        最近做关于雨量插值的项目,本来使用后台的GP工具做的,但是处理时间比较长需要十几秒钟左右,所以研究怎么通过前台来计算.     参考下克里金例子,思路是生成要计算区域的100乘以100网格,然 ...

  5. Android之RxJava详解

    文章大纲 一.什么是RxJava二.为什么要用RxJava三.RxJava使用详解四.项目源码下载五.参考文章 一.什么是RxJava   Rx(Reactive Extensions)是一个库,用来 ...

  6. 外呼系统APP外呼软件手机电销软件拨号销售软件功能设计

    外呼系统APP外呼软件 1 系统概述 该软件系统设计功能主要为贷款.投资.资产管理等金融中介公司提供方便快捷的线上管理各类资源的一款应用软件工具. 可根据不同职位的账号登录APP来管理电话营销.客户签 ...

  7. new Date()传参的浏览器兼容性

    测试以下是在IE9的测试情况 可以看到IE9不支持new Date('2018-1-2')和new Date('123456'),但是支持new Date('2018-01-02').new Date ...

  8. IM开发者的零基础通信技术入门(一)：通信交换技术的百年发展史(上)

    [来源申明]本文原文来自:微信公众号“鲜枣课堂”,官方网站:xzclass.com,原题为:<通信交换的百年沧桑(上)>,本文引用时已征得原作者同意.为了更好的内容呈现,即时通讯网在收录时 ...

  9. Android开发：APK的反编译（获取代码和资源文件）

    一.反编译工具: 1.APKTool: APKTool是由GOOGLE提供的APK编译工具,能够完成反编译及回编译apk的工作.同时,它也有着安装反编译系统apk所需要的framework-res框架 ...

  10. Kubernetes 笔记 10 Job 机器人加工厂

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. Hi,大家好, ...