小企业网站建设价格,房产中介网站模板,如何免费自己做网站,企业网站源码php最近#xff0c;在书写div块时#xff0c;遇到一个小问题#xff0c;这个小问题我搞了将近一个小时多才慢慢解决。问题是这样子的#xff0c;有一个div块#xff0c;我想让鼠标移上去变成蓝色#xff0c;移开变成灰色#xff0c;当鼠标按下去时让他变成深蓝色。于是就单…最近在书写div块时遇到一个小问题这个小问题我搞了将近一个小时多才慢慢解决。问题是这样子的有一个div块我想让鼠标移上去变成蓝色移开变成灰色当鼠标按下去时让他变成深蓝色。于是就单纯添加onmouse事件实验起来发现笔者鼠标按下去确实变色但是移开时却又变回来。于是为了此问题写了这篇博文
1、问题起源
div变颜色不如笔者想法移上去变色移开变色按下去变色但不想让按下去再移开变色。
2、问题解决方案
设计onmouse事件温习下onmouse事件
onmousedown 事件会在鼠标被按下时发生onmouseup:事件会在用户鼠标时按键被松开时执行onmousemove:事件会在鼠标移动到指定元素后执行onmouseout事件会在鼠标移出指定的元素对象时执行
!DOCTYPE html
htmlheadlink relstylesheet hrefhttps://cdn.jsdelivr.net/npm/bootstrap4.6.2/dist/css/bootstrap.min.cssintegritysha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HIN crossoriginanonymousmeta charsetutf-8title/titlestyle#mTestCases{width:100px;height:100px;background-color: grey;}#mAuto_Test {width:100px;height:100px;margin-top:5px;background-color: grey;}/style/headbodydiv idmTestCases/divdiv idmAuto_Test/divscriptvar 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.backgroundColorrgb(249,250,255);this.style.colorrgb(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.backgroundColorrgb(249,250,255);this.style.colorrgb(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/html3、问题测试效果
鼠标移上去 移开后 鼠标点击
