鼠标移动到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. Zabbix-server 3.4 安装详细和修改web界面中文出现的乱码（一）

    1. 老套路先来个Zabbix简介: Zabbix是一个企业级的.开源的.分布式的监控套件: Zabbix可以监控网络和服务的监控状况. Zabbix利用灵活的告警机制,允许用户对事件发送Email. ...

  2. shell-输入与输出<echo, read, cat， tee >

    1. echo echo命令可以显示文本行或变量,或者吧字符串输入到文件. 用法:echo [option] string   #[option]可选:-e ==>解析转移字符,(常用的\n & ...

  3. zookeeper源码 — 一、单机启动

    zookeeper一般使用命令工具启动,启动主要就是初始化所有组件,让server可以接收并处理来自client的请求.本文主要结构: main入口 配置解析 组件启动 main入口 我们一般使用命令 ...

  4. Vue基本使用

    Vue.js是一款流行的开源JavaScript前端框架,旨在更好地组织与简化Web开发.Vue所关注的核心是MVC模式中的视图层,同时,它也能方便地获取数据更新,并通过组件内部特定的方法实现视图与模 ...

  5. vue 中使用promise

    init1(){return new Promise((resolve, reject) => { let data={ dateStr:this.time }; api.get('url', ...

  6. C++11新特性之tie、tuple的应用

    //tuplestd::tuple<int, int, int, int, QString> Thorface::getUserInfoToJudgeOpendoor(QString st ...

  7. 同事搭一个测试RAC说节点2发现idle了，报ORA-00304

    [oracle@testrac2 11204]$ sqlplus / as sysdba SQL*Plus: Release 11.2.0.4.0 Production on Wed Jan 16 1 ...

  8. Linux下使用ntpdate进行时间同步

    转摘自Linux下使用ntpdate进行时间同步https://www.cnblogs.com/zhi-leaf/p/6281549.html1.安装ntpdate,执行以下命令 # yum inst ...

  9. 在Docker中体验数据库之Microsoft SQL Server

    前面记录了一下在docker中体验mongodb和mysql.今天记录一下mssql……其实早就体验了,就是没有记录,前几天看了一下2019的一些新闻,很喜欢Polybase这个特性,想体验一把,可惜 ...

  10. c/c++ 网络编程 陈硕老师视频理解之ttcp

    ttcp 是干啥的:测试2台机器间的网络传输性能 wiki 功能如下图: 对应的视频是: 4.回顾基础的Sockets API.mkv 5.TTCP代码概览.mkv 6.使用TTCP进行网络传输性能测 ...