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帮我直接拷贝过去，…...
eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)
说明： 想象一下，你正在用eNSP搭建一个虚拟的网络世界，里面有虚拟的路由器、交换机、电脑（PC）等等。这些设备都在你的电脑里面“运行”，它们之间可以互相通信，就像一个封闭的小王国。 但是&#…...
智慧医疗能源事业线深度画像分析（上）
引言 医疗行业作为现代社会的关键基础设施，其能源消耗与环境影响正日益受到关注。随着全球"双碳"目标的推进和可持续发展理念的深入，智慧医疗能源事业线应运而生，致力于通过创新技术与管理方案，重构医疗领域的能源使用模式。这一事业线融合了能源管理、可持续发…...
使用rpicam-app通过网络流式传输视频)
树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频
使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源： http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...
FFmpeg 低延迟同屏方案
引言 在实时互动需求激增的当下，无论是在线教育中的师生同屏演示、远程办公的屏幕共享协作，还是游戏直播的画面实时传输，低延迟同屏已成为保障用户体验的核心指标。FFmpeg 作为一款功能强大的多媒体框架，凭借其灵活的编解码、数据…...
uniapp微信小程序视频实时流+pc端预览方案
方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度WebSocket图片帧定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐RTMP推流TRTC/即构SDK推流❌ 付费方案 （部分有免费额度&#x…...
蓝桥杯3498 01串的熵
问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798， 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...
今日学习：Spring线程池|并发修改异常|链路丢失|登录续期|VIP过期策略|数值类缓存
文章目录 优雅版线程池ThreadPoolTaskExecutor和ThreadPoolTaskExecutor的装饰器并发修改异常并发修改异常简介实现机制设计原因及意义 使用线程池造成的链路丢失问题线程池导致的链路丢失问题发生原因 常见解决方法更好的解决方法设计精妙之处 登录续期登录续期常见实现方式特…...
嵌入式学习笔记DAY33（网络编程——TCP）
一、网络架构 C/S （client/server 客户端/服务器）：由客户端和服务器端两个部分组成。客户端通常是用户使用的应用程序，负责提供用户界面和交互逻辑 ，接收用户输入，向服务器发送请求，并展示服务…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
解析奥地利 XARION激光超声检测系统：无膜光学麦克风 + 无耦合剂的技术协同优势及多元应用
在工业制造领域，无损检测（NDT)的精度与效率直接影响产品质量与生产安全。奥地利 XARION开发的激光超声精密检测系统，以非接触式光学麦克风技术为核心，打破传统检测瓶颈，为半导体、航空航天、汽车制造等行业提供了高灵敏…...