鼠标移动到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. jdk源码阅读笔记-HashSet

    通过阅读源码发现,HashSet底层的实现源码其实就是调用HashMap的方法实现的,所以如果你阅读过HashMap或对HashMap比较熟悉的话,那么阅读HashSet就很轻松,也很容易理解了.我之 ...

  2. Windows下安装tesserocr

    很难受,由于这两天重装了系统,又得重新配置环境了,而我在安装tesserocr的时候踩了一些坑,于是想写出来分享一下. 一.安装tesseract 要安装tesserocr,首先要下载tesserac ...

  3. Netty源码—七、内存释放

    Netty本身在内存分配上支持堆内存和直接内存,我们一般选用直接内存,这也是默认的配置.所以要理解Netty内存的释放我们得先看下直接内存的释放. Java直接内存释放 我们先来看下直接内存是怎么使用 ...

  4. 用python复制图片、视频

    图片复制 f_src = open('1.jpg','rb') content = f_src.read() f_copy = open('1-副本.jpg','wb') f_copy.write(c ...

  5. (办公)springboot配置aop处理请求.

    最近项目用到springboot,就是需要配置一些东西.比如用aop处理请求.方法前通知获取url,method,ip,类方法,参数,方法后通知,返回参数,而且还可以记录一下日志.下面是操作的代码. ...

  6. 2017-12-09 JavaScript实现ZLOGO子集: 测试用例

    续前文JavaScript实现ZLOGO子集: 前进+转向. 在添加新功能之前, 先添加测试用例, 以应对日益复杂的代码. 选择使用QUnit编写运行测试用例. 暂时对比较复杂和I/O无关的部分进行测 ...

  7. DataPipeline成功入选微软加速器 企业创新力获业界专家认可

    近日,微软加速器•北京公布最终入选的第13期创新企业名单.作为国内领先的“iPaaS+AI”一站式数据融合服务提供商DataPipeline,历经多轮角逐,在上千家企业激烈竞争中,成功入选. 高手过招 ...

  8. ReactiveSwift源码解析(四) Signal中的静态属性静态方法以及面向协议扩展

    上篇博客我们聊了Signal的几种状态.Signal与Observer的关联方式以及Signal是如何向关联的Observer发送事件的.本篇博客继续上篇博客的内容,来聊一下Signal类中静态的ne ...

  9. for in 使用

    // JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写. var json = { "id": 1, "n ...

  10. SpringBoot2.0 项目中使用事务

    参考博客: SpringBoot开启事务常见坑点 另外注意手动回滚事务需要 (1)在业务层方法上添加注解 @Transactional (2)在需要回滚的地方添加代码: TransactionAspe ...