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

news2024/9/30 1:40:15

最近，在书写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>