今天遇到一个问题:要求是一个div,hover是一种样式,onclick后是另一种样式,结果两者冲突,当点击后,还是hover的样式,只有离开div才是onclick,所以就用了!important。
后来自己又尝试了一个测试程序,发现onclick后hover无法生效,还是用了!important。
主要原因是两者本身就有冲突,再加上操作的样式中有重复的。
测试程序:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#btn:hover{
background-color: red !important;
}
</style>
</head>
<body>
<button οnclick="change()" id="btn">切换背景</button>
<script type="text/javascript">
function getId(id){
return document.getElementById(id);
}
function change(){
getId("btn").style.backgroundColor="blue";
}
</script>
</body>
</html>