css 点击(onMouseDown和onMouseUp)后,hover失效

希望结果

正常情况蓝色，悬停时浅蓝，onMouseDown时深蓝，onMouseUp时蓝色

最初代码

<style>
#div{
	background:蓝色;
}
#div:hover{
	background:浅蓝;	
}
<div id="div" onmousedown="mouseDown()" onmouseup="mouseUp()"></div>
<script>
function mouseDown(){
   $("#add").css({
     "background":"深蓝",
   });
 }
function mouseUp(){
   $("#add").css({
     "background":"蓝色",
   });
 }
</script>

最初代码结果

未触发onMouseDown、onMouseUp之前，正常时蓝色，悬停时浅蓝。
触发onMouseDown、onMouseUp之后，悬停效果消失

悬停效果消失原因

js代码修改css样式，等同于html中设置style的background属性，此时是内联样式，根据css样式优先级、特指度，内联样式的优先级要高于hover的优先级，所以hover失效了

解决办法

上面代码不动，修改部分如下：

function mouseUp(){
   $("#add").css({
     "background":"",
   });
 }

注意

不能采用在hover的css中加上!important的方式 #div:hover{ background:浅蓝 !important; }。由于!important优先级最高，onMouseDown和onMouseUp的效果会失效