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

水深无声 2024-03-22 20:34 78阅读 0赞

最近，在书写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、问题测试效果 ###

鼠标移上去  
![在这里插入图片描述][d96c98ee6b764489ae139fe1567d115c.png]  
移开后

![在这里插入图片描述][b3bd623f99e8469ba28723567ee571cc.png]

鼠标点击  
![在这里插入图片描述][51d4bb504a1c4c9da2532f215eb97885.png]

[d96c98ee6b764489ae139fe1567d115c.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2d30effa21e7472eaaffb24b8d24dcc9.png
[b3bd623f99e8469ba28723567ee571cc.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/a1d8910283354e1a9d2d162b4de896df.png
[51d4bb504a1c4c9da2532f215eb97885.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/14/2a6c138666d84f36a998bd46465e9cd9.png