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/[email protected]/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事件让元素变颜色_第1张图片
移开后

html基于onmouse事件让元素变颜色_第2张图片

鼠标点击
html基于onmouse事件让元素变颜色_第3张图片

你可能感兴趣的:(H5C3,html,前端,javascript)