html基于onmouse事件让元素变颜色
最近，在书写div块时，遇到一个小问题，这个小问题我搞了将近一个小时多才慢慢解决。问题是这样子的，有一个div块，我想让鼠标移上去变成蓝色，移开变成灰色，当鼠标按下去时让他变成深蓝色。于是就单纯添加onmouse事件，实验起来发现，笔者鼠标按下去确实变色，但是移开时却又变回来。于是为了此问题写了这篇博文
1、问题起源
div变颜色不如笔者想法，移上去变色，移开变色，按下去变色但不想让按下去再移开变色。
2、问题解决方案
设计onmouse事件，温习下onmouse事件
- onmousedown 事件会在鼠标被按下时发生
- onmouseup:事件会在用户鼠标时按键被松开时执行
- onmousemove:事件会在鼠标移动到指定元素后执行
- onmouseout：事件会在鼠标移出指定的元素对象时执行
<!DOCTYPE html>
<html><head><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous"><meta charset="utf-8"><title></title><style>#mTestCases{width:100px;height:100px;background-color: grey;}#mAuto_Test {width:100px;height:100px;margin-top:5px;background-color: grey;}</style></head><body><div id="mTestCases"></div><div id="mAuto_Test"></div><script>var tmp1 = document.getElementById("mTestCases");tmp1.onmousedown = function(){this.style.backgroundColor = "rgb(72,152,246)";this.style.color = "white";this.onmouseout = null;var tp2 = document.getElementById("mAuto_Test");tp2.onmouseout = function(){this.style.backgroundColor='rgb(249,250,255)';this.style.color='rgb(94,104,134)';}tp2.style.backgroundColor = "rgb(249,250,255)";tp2.style.color = "rgb(94,104,134)";}tmp1.onmousemove = function(){this.style.backgroundColor = "rgb(72,152,246)";this.style.color = "white";}var tmp2 = document.getElementById("mAuto_Test");tmp2.onmousedown = function(){this.style.backgroundColor = "rgb(72,152,246)";this.style.color = "white";this.onmouseout = null;var tp2 = document.getElementById("mTestCases");tp2.onmouseout = function(){this.style.backgroundColor='rgb(249,250,255)';this.style.color='rgb(94,104,134)';}tp2.style.backgroundColor = "rgb(249,250,255)";tp2.style.color = "rgb(94,104,134)";}tmp2.onmousemove = function(){this.style.backgroundColor = "rgb(72,152,246)";this.style.color = "white";}</script></body></html>
3、问题测试效果
鼠标移上去
移开后
鼠标点击
相关文章：
html基于onmouse事件让元素变颜色
最近，在书写div块时，遇到一个小问题，这个小问题我搞了将近一个小时多才慢慢解决。问题是这样子的，有一个div块，我想让鼠标移上去变成蓝色，移开变成灰色，当鼠标按下去时让他变成深蓝色。于是就单…...
Linux环境PostgreSQL安装
今日一语：鲲鹏扶摇而直上九万里，雄鹰展翅高飞，这是因为鲲鹏一出世就得历劫，老鹰刚长出翅膀就会被扔下悬崖 下载安装包，解压到服务器中，然后 make && make install # 登录使用 ./psql # 切换数据库…...
Rust 数据类型 之 结构体（Struct）
目录 结构体（Struct） 定义与声明 结构体定义 结构体实例 结构体分类 单元结构体（Unit Struct） 元组结构体（Tuple Struct） 具名结构体（Named Struct） 结构体嵌套 结构体方法…...
数据结构之Queue的实现
Queue支持的方法 方法名参数功能返回Sizevoid返回链表规模(该方法由List< T>派生而来)emptyvoid返回链表是否为空(该方法由List< T>派生而来)frontvoid返回队首数据域的引用enqueueT const & e入队voiddequeuevoid出队出队的对象 code // Queue.h # pragma …...
rust声明式宏
宏 在 rust 中，我们一开始就在使用宏，例如 println!, vec!, assert_eq! 等。看起来宏和函数在使用时只是多了一个 !。实际上这些宏都是声明式宏（也叫示例宏或macro_rules!），rust 还支持过程宏，过程宏为我们…...
第二章：Learning Deep Features for Discriminative Localization ——学习用于判别定位的深度特征
0.摘要 在这项工作中，我们重新审视了在[13]中提出的全局平均池化层，并阐明了它如何明确地使卷积神经网络（CNN）具有出色的定位能力，尽管它是在图像级别标签上进行训练的。虽然这个技术之前被提出作为一种训练规范化的手…...
【CSS】box-shadow 属性
box-shadow 是 CSS 属性，用于为元素添加一个阴影效果，使元素看起来浮起或有层次感。 该属性允许设置一个或多个阴影效果，其语法如下： box-shadow: h-shadow v-shadow blur spread color inset;h-shadow：水平阴影的位…...
基于深度学习的高精度课堂人脸检测系统（PyTorch+Pyside6+YOLOv5模型）
摘要：基于深度学习的高精度课堂人脸检测系统可用于日常生活中或野外来检测与定位课堂人脸目标，利用深度学习算法可实现图片、视频、摄像头等方式的课堂人脸目标检测识别，另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标…...
Mysql错误日志、通用查询日志、二进制日志和慢日志的介绍和查看
一.日志 1.日志和备份的必要性 日志刷新 2.mysql的日志类型 （1）错误日志 查看当前错误日志和是否记录警告设置 （2）通用查询日志 查看通用查询日志的设置 （3）二进制日志 查看二进制文件的设置&…...
【Linux】Tcp服务器的三种与客户端通信方法及守护进程化
全是干货~ 文章目录 前言一、多进程版二、多线程版三、线程池版四、Tcp服务器日志的改进五、将Tcp服务器守护进程化总结 前言 在上一篇文章中，我们实现了Tcp服务器，但是为了演示多进程和多线程的效果，我们将服务器与客户通通信写成了一下死循…...
【Spring Cloud】git 仓库新的配置是如何刷新到各个微服务的原理步骤
文章目录 1. 第一次启动时2. 后续直接在 git 修改配置时3. 参考资料 本文描述了在 git 仓库修改了配置之后，新的配置是如何刷新到各个微服务的步骤 前言： 1、假设现有有 3 个微服务，1 个是 配置中心，另外 2 个是普通微服务&#x…...
三，创建订单微服务消费者 第三章
4.3 修改pom添加依赖 <dependencies><!--web--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!--监控--><dependency><groupId&g…...
【雕爷学编程】Arduino动手做（87）---ULN2003步进电机模组2
37款传感器与执行器的提法，在网络上广泛流传，其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块，依照实践出真知（一定要动手做）的理念，以学习和交流为目的&am…...
【C#】微软的Roslyn 是个啥？
一、说明 Roslyn 是微软重写的C#编译器并开源。 Roslyn 是 C# 和 Visual Basic.NET 开源编译器的代号。以下是它如何在过去十年企业Microsoft的最黑暗中开始，并成为所有C#（和VB）的开源，跨平台，公共语言引擎，…...
两个小封装电机驱动芯片：MLX813XX、A4950
一．MLX813XX MELEXIS的微型电机驱动MLX813XX系列芯片集成MCU、预驱动以及功率模块等能够满足10W以下的电机驱动。 相对于普通分离器件的解决方案，MLX813XX系列电机驱动芯片是一款高集成度的驱动控制芯片，可以满足汽车系统高品质和低成本的要…...
数据结构【绪论】
数据结构入门级 第一章绪论 什么是数据结构？什么是数据类型？ 程序数据结构算法 一、基本概念： 数据：指所有能被计算机处理的，无论图、文字、符号等。数据元素：数据的基本单位，通常作为整体考…...
掌握无人机遥感数据预处理的全链条理论与实践流程、典型农林植被性状的估算理论与实践方法、利用MATLAB进行编程实践（脚本与GUI开发）以及期刊论文插图制作等
目录 专题一 认识主被动无人机遥感数据 专题二 预处理无人机遥感数据 专题三 定量估算农林植被关键性状 专题四 期刊论文插图精细制作与Appdesigner应用开发 近地面无人机植被定量遥感与生理参数反演 更多推荐 遥感技术作为一种空间大数据手段，能够从多时、多…...
Angular中组件设计需要注意什么？
在 Angular 中设计组件时，有几个重要的方面需要注意。以下是一些建议： 1、单一职责原则：确保每个组件只负责一个明确定义的任务。这有助于保持组件简单、可维护，并且易于重用。 2、组件通信：了解组件之间的通信方式。…...
电容触摸屏(TP)的工艺结构
液晶显示屏(LCM),触摸屏(TP) “GG、GP、GF”这是结构分类，第一个字母表面材质（又称为上层），第二个字母是触摸屏的材质（又称为下层），两者贴合在一起。 G玻璃，FFILM，“”贴…...
Qt小妙招：如何在可执行文件生成后，在pro文件中添加其他命令操作？
问题描述： 场景1：我的可执行文件设置生成路径为某个最终目录的bin目录下，当我要修改某些config.ini或者xxx.json,或者一些qss，css文件的时候，我想直接在构建的时候，Qtcreator帮我直接拷贝过去，…...
XML Group端口详解
在XML数据映射过程中，经常需要对数据进行分组聚合操作。例如，当处理包含多个物料明细的XML文件时，可能需要将相同物料号的明细归为一组，或对相同物料号的数量进行求和计算。传统实现方式通常需要编写脚本代码，增加了开…...
【Axure高保真原型】引导弹窗
今天和大家中分享引导弹窗的原型模板，载入页面后，会显示引导弹窗，适用于引导用户使用页面，点击完成后，会显示下一个引导弹窗，直至最后一个引导弹窗完成后进入首页。具体效果可以点击下方视频观看或打开下方…...
前端导出带有合并单元格的列表
// 导出async function exportExcel(fileName "共识调整.xlsx") {// 所有数据const exportData await getAllMainData();// 表头内容let fitstTitleList [];const secondTitleList [];allColumns.value.forEach(column > {if (!column.children) {fitstTitleL…...
Java 加密常用的各种算法及其选择
在数字化时代，数据安全至关重要，Java 作为广泛应用的编程语言，提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景，有助于开发者在不同的业务需求中做出正确的选择。 一、对称加密算法…...
Rust 异步编程
Rust 异步编程 引言 Rust 是一种系统编程语言，以其高性能、安全性以及零成本抽象而著称。在多核处理器成为主流的今天，异步编程成为了一种提高应用性能、优化资源利用的有效手段。本文将深入探讨 Rust 异步编程的核心概念、常用库以及最佳实践。 异步编程基础 什么是异步…...
Android15默认授权浮窗权限
我们经常有那种需求，客户需要定制的apk集成在ROM中，并且默认授予其【显示在其他应用的上层】权限，也就是我们常说的浮窗权限，那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
SQL慢可能是触发了ring buffer
简介 最近在进行 postgresql 性能排查的时候，发现 PG 在某一个时间并行执行的 SQL 变得特别慢。最后通过监控监观察到并行发起得时间 buffers_alloc 就急速上升，且低水位伴随在整个慢 SQL，一直是 buferIO 的等待事件，此时也没有其他会话的争抢。SQL 虽然不是高效 SQL ，但…...
【C++特殊工具与技术】优化内存分配(一)：C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
xmind转换为markdown
文章目录 解锁思维导图新姿势：将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件（ZIP处理）2.解析JSON数据结构3：递归转换树形结构4：Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...
)
ArcPy扩展模块的使用(3)
管理工程项目 arcpy.mp模块允许用户管理布局、地图、报表、文件夹连接、视图等工程项目。例如，可以更新、修复或替换图层数据源，修改图层的符号系统，甚至自动在线执行共享要托管在组织中的工程项。 以下代码展示了如何更新图层的数据源&…...