当前位置：首页 > news >正文

html基于onmouse事件让元素变颜色

news 2025/12/24 21:38:31

最近，在书写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块，我想让鼠标移上去变成蓝色，移开变成灰色，当鼠标按下去时让他变成深蓝色。于是就单…...

编程日记 2023/7/26 16:07:39

Linux环境PostgreSQL安装

今日一语：鲲鹏扶摇而直上九万里，雄鹰展翅高飞，这是因为鲲鹏一出世就得历劫，老鹰刚长出翅膀就会被扔下悬崖下载安装包，解压到服务器中，然后 make && make install # 登录使用 ./psql # 切换数据库…...

编程日记 2023/7/26 16:06:38

Rust 数据类型之结构体（Struct）

目录结构体（Struct） 定义与声明结构体定义结构体实例结构体分类单元结构体（Unit Struct） 元组结构体（Tuple Struct） 具名结构体（Named Struct） 结构体嵌套结构体方法…...

编程日记 2023/7/26 16:05:37

数据结构之Queue的实现

Queue支持的方法方法名参数功能返回Sizevoid返回链表规模(该方法由List< T>派生而来)emptyvoid返回链表是否为空(该方法由List< T>派生而来)frontvoid返回队首数据域的引用enqueueT const & e入队voiddequeuevoid出队出队的对象 code // Queue.h # pragma …...

编程日记 2023/7/26 16:04:36

rust声明式宏

宏在 rust 中，我们一开始就在使用宏，例如 println!, vec!, assert_eq! 等。看起来宏和函数在使用时只是多了一个 !。实际上这些宏都是声明式宏（也叫示例宏或macro_rules!），rust 还支持过程宏，过程宏为我们…...

编程日记 2023/7/26 16:03:35

第二章：Learning Deep Features for Discriminative Localization ——学习用于判别定位的深度特征

0.摘要在这项工作中，我们重新审视了在[13]中提出的全局平均池化层，并阐明了它如何明确地使卷积神经网络（CNN）具有出色的定位能力，尽管它是在图像级别标签上进行训练的。虽然这个技术之前被提出作为一种训练规范化的手…...

编程日记 2023/7/26 16:02:34

【CSS】box-shadow 属性

box-shadow 是 CSS 属性，用于为元素添加一个阴影效果，使元素看起来浮起或有层次感。该属性允许设置一个或多个阴影效果，其语法如下： box-shadow: h-shadow v-shadow blur spread color inset;h-shadow：水平阴影的位…...

编程日记 2023/7/26 16:01:32

基于深度学习的高精度课堂人脸检测系统（PyTorch+Pyside6+YOLOv5模型）

摘要：基于深度学习的高精度课堂人脸检测系统可用于日常生活中或野外来检测与定位课堂人脸目标，利用深度学习算法可实现图片、视频、摄像头等方式的课堂人脸目标检测识别，另外支持结果可视化与图片或视频检测结果的导出。本系统采用YOLOv5目标…...

编程日记 2023/7/26 16:00:31

Mysql错误日志、通用查询日志、二进制日志和慢日志的介绍和查看

一.日志 1.日志和备份的必要性日志刷新 2.mysql的日志类型 （1）错误日志查看当前错误日志和是否记录警告设置 （2）通用查询日志查看通用查询日志的设置 （3）二进制日志查看二进制文件的设置&…...

编程日记 2023/7/26 15:59:29

【Linux】Tcp服务器的三种与客户端通信方法及守护进程化

全是干货~ 文章目录前言一、多进程版二、多线程版三、线程池版四、Tcp服务器日志的改进五、将Tcp服务器守护进程化总结前言在上一篇文章中，我们实现了Tcp服务器，但是为了演示多进程和多线程的效果，我们将服务器与客户通通信写成了一下死循…...

编程日记 2023/7/26 15:58:28

【Spring Cloud】git 仓库新的配置是如何刷新到各个微服务的原理步骤

文章目录 1. 第一次启动时2. 后续直接在 git 修改配置时3. 参考资料本文描述了在 git 仓库修改了配置之后，新的配置是如何刷新到各个微服务的步骤前言： 1、假设现有有 3 个微服务，1 个是配置中心，另外 2 个是普通微服务&#x…...

编程日记 2023/7/26 15:57:27

三，创建订单微服务消费者第三章

4.3 修改pom添加依赖 <dependencies><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId&g…...

编程日记 2023/7/26 15:56:27

【雕爷学编程】Arduino动手做（87）---ULN2003步进电机模组2

37款传感器与执行器的提法，在网络上广泛流传，其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块，依照实践出真知（一定要动手做）的理念，以学习和交流为目的&am…...

编程日记 2023/7/26 15:55:25

【C#】微软的Roslyn 是个啥？

一、说明 Roslyn 是微软重写的C#编译器并开源。 Roslyn 是 C# 和 Visual Basic.NET 开源编译器的代号。以下是它如何在过去十年企业Microsoft的最黑暗中开始，并成为所有C#（和VB）的开源，跨平台，公共语言引擎&#xff0c…...

编程日记 2023/7/26 15:54:24

两个小封装电机驱动芯片：MLX813XX、A4950

一．MLX813XX MELEXIS的微型电机驱动MLX813XX系列芯片集成MCU、预驱动以及功率模块等能够满足10W以下的电机驱动。相对于普通分离器件的解决方案，MLX813XX系列电机驱动芯片是一款高集成度的驱动控制芯片，可以满足汽车系统高品质和低成本的要…...

编程日记 2023/7/26 15:53:23

数据结构【绪论】

数据结构入门级第一章绪论什么是数据结构？什么是数据类型？ 程序数据结构算法一、基本概念： 数据：指所有能被计算机处理的，无论图、文字、符号等。数据元素：数据的基本单位，通常作为整体考…...

编程日记 2023/7/26 15:52:22

掌握无人机遥感数据预处理的全链条理论与实践流程、典型农林植被性状的估算理论与实践方法、利用MATLAB进行编程实践（脚本与GUI开发）以及期刊论文插图制作等

目录专题一认识主被动无人机遥感数据专题二预处理无人机遥感数据专题三定量估算农林植被关键性状专题四期刊论文插图精细制作与Appdesigner应用开发近地面无人机植被定量遥感与生理参数反演更多推荐遥感技术作为一种空间大数据手段，能够从多时、多…...

编程日记 2023/7/26 15:51:21

Angular中组件设计需要注意什么？

在 Angular 中设计组件时，有几个重要的方面需要注意。以下是一些建议： 1、单一职责原则：确保每个组件只负责一个明确定义的任务。这有助于保持组件简单、可维护，并且易于重用。 2、组件通信：了解组件之间的通信方式。…...

编程日记 2023/7/26 15:50:20

电容触摸屏(TP)的工艺结构

液晶显示屏(LCM),触摸屏(TP) “GG、GP、GF”这是结构分类，第一个字母表面材质（又称为上层），第二个字母是触摸屏的材质（又称为下层），两者贴合在一起。 G玻璃，FFILM，“”贴…...

编程日记 2023/7/26 15:49:19

Qt小妙招：如何在可执行文件生成后，在pro文件中添加其他命令操作？

问题描述： 场景1：我的可执行文件设置生成路径为某个最终目录的bin目录下，当我要修改某些config.ini或者xxx.json,或者一些qss，css文件的时候，我想直接在构建的时候，Qtcreator帮我直接拷贝过去，…...

编程日记 2023/7/26 15:48:18

观成科技：隐蔽隧道工具Ligolo-ng加密流量分析

1.工具介绍 Ligolo-ng是一款由go编写的高效隧道工具，该工具基于TUN接口实现其功能，利用反向TCP/TLS连接建立一条隐蔽的通信信道，支持使用Let’s Encrypt自动生成证书。Ligolo-ng的通信隐蔽性体现在其支持多种连接方式，适应复杂网…...

编程新知 2025/12/23 23:32:15

多模态2025：技术路线“神仙打架”，视频生成冲上云霄

文｜魏琳华编｜王一粟一场大会，聚集了中国多模态大模型的“半壁江山”。智源大会2025为期两天的论坛中，汇集了学界、创业公司和大厂等三方的热门选手，关于多模态的集中讨论达到了前所未有的热度。其中，…...

编程新知 2025/12/24 13:05:18

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务中文乱码问题： 下面创建一个简单的Flask RESTful API示例。首先，我们需要创建环境，安装必要的依赖，然后…...

编程新知 2025/12/24 15:58:42

【HarmonyOS 5.0】DevEco Testing：鸿蒙应用质量保障的终极武器

——全方位测试解决方案与代码实战一、工具定位与核心能力 DevEco Testing是HarmonyOS官方推出的一体化测试平台，覆盖应用全生命周期测试需求，主要提供五大核心能力： 测试类型检测目标关键指标功能体验基…...

编程新知 2025/12/23 1:55:01

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

MVC 数据库

MVC 数据库引言在软件开发领域，Model-View-Controller（MVC）是一种流行的软件架构模式，它将应用程序分为三个核心组件：模型（Model）、视图（View）和控制器（Controller）。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系，以…...

编程新知 2025/10/30 4:58:11

高等数学（下）题型笔记（八）空间解析几何与向量代数

目录 0 前言 1 向量的点乘 1.1 基本公式 1.2 例题 2 向量的叉乘 2.1 基础知识 2.2 例题 3 空间平面方程 3.1 基础知识 3.2 例题 4 空间直线方程 4.1 基础知识 4.2 例题 5 旋转曲面及其方程 5.1 基础知识 5.2 例题 6 空间曲面的法线与切平面 6.1 基础知识 6.2…...

编程新知 2025/12/23 20:11:18