问题
在下面这种情况:
<a href="#" id="link">点击我</a>
<style>
#link:hover{
color: "yellow";
}
</style>
这段代码简单的设置了一个链接的hover鼠标悬停伪类样式,但是如果我们加入下面这段代码的话:
<script>
window.onload = function() {
document.getElementById("link").onclick = function() {
var v = document.getElementById("aa");
v.style.color = "red";
};
};
</script>
这是用于定义该链接的click事件的,当同时定义一个链接的click事件和CSS伪类时,当进行了事件的点击之后,我们会发现其伪类样式失效了,这是因为他们之间相互冲突。
解决办法
方法一
将CSS伪类定义的属性提高一个优先级,这样一来,就迎刃而解了
<style>
#link:hover{
color: "yellow" !important;
}
</style>
方法二
将onclick事件中更改color属性变为为更改标签的className属性
<style>
.click{
color = "red";
}
</style>
<script>
window.onload = function() {
document.getElementById("link").onclick = function() {
var v = document.getElementById("aa");
v.className = "click";
};
};
</script>