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

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

news 2025/7/14 13:36:44

最近，在书写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事件让元素变颜色

最近&#xff0c;在书写div块时&#xff0c;遇到一个小问题&#xff0c;这个小问题我搞了将近一个小时多才慢慢解决。问题是这样子的&#xff0c;有一个div块&#xff0c;我想让鼠标移上去变成蓝色&#xff0c;移开变成灰色&#xff0c;当鼠标按下去时让他变成深蓝色。于是就单…...

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

Linux环境PostgreSQL安装

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

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

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

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

编程日记 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 中&#xff0c;我们一开始就在使用宏&#xff0c;例如 println!, vec!, assert_eq! 等。看起来宏和函数在使用时只是多了一个 !。实际上这些宏都是声明式宏&#xff08;也叫示例宏或macro_rules!&#xff09;&#xff0c;rust 还支持过程宏&#xff0c;过程宏为我们…...

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

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

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

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

【CSS】box-shadow 属性

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4.3 修改pom添加依赖 <dependencies><!--web--><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款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…...

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

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

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

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

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

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

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

数据结构【绪论】

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

编程新知 2025/7/13 15:25:03

遍历 Map 类型集合的方法汇总

1 方法一 先用方法 keySet() 获取集合中的所有键。再通过 gey(key) 方法用对应键获取值 import java.util.HashMap; import java.util.Set;public class Test {public static void main(String[] args) {HashMap hashMap new HashMap();hashMap.put("语文",99);has…...

编程新知 2025/7/12 23:00:31

蓝牙 BLE 扫描面试题大全(2)：进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

编程新知 2025/7/12 4:49:21

spring：实例工厂方法获取bean

spring处理使用静态工厂方法获取bean实例&#xff0c;也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下&#xff1a; 定义实例工厂类&#xff08;Java代码&#xff09;&#xff0c;定义实例工厂&#xff08;xml&#xff09;&#xff0c;定义调用实例工厂&#xff…...

编程新知 2025/7/11 1:50:50

论文解读：交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架（一）

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

编程新知 2025/7/9 18:40:03

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2025/7/5 16:03:22

鸿蒙DevEco Studio HarmonyOS 5跑酷小游戏实现指南

1. 项目概述 本跑酷小游戏基于鸿蒙HarmonyOS 5开发&#xff0c;使用DevEco Studio作为开发工具&#xff0c;采用Java语言实现&#xff0c;包含角色控制、障碍物生成和分数计算系统。 2. 项目结构 /src/main/java/com/example/runner/├── MainAbilitySlice.java // 主界…...

编程新知 2025/7/10 20:33:36

CSS设置元素的宽度根据其内容自动调整

width: fit-content 是 CSS 中的一个属性值&#xff0c;用于设置元素的宽度根据其内容自动调整&#xff0c;确保宽度刚好容纳内容而不会超出。 效果对比 默认情况&#xff08;width: auto&#xff09;&#xff1a; 块级元素&#xff08;如 <div>&#xff09;会占满父容器…...

编程新知 2025/6/20 15:09:15

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

编程新知 2025/7/12 0:11:18

GitFlow 工作模式（详解）

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

编程新知 2025/7/12 20:20:37