关于CSS伪类特性和CLICK等事件的冲突解决方案

最新推荐文章于 2025-05-17 16:45:10 发布

吃掉月亮

最新推荐文章于 2025-05-17 16:45:10 发布

阅读量3.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： Html及Javascript 文章标签： Html与Js

本文链接：https://blog.youkuaiyun.com/qq_41135704/article/details/81842687

Html及Javascript 专栏收录该内容

9 篇文章

订阅专栏

本文探讨了CSS伪类与JavaScript事件处理程序之间的冲突问题，特别是在链接元素上定义click事件和hover状态时出现的问题，并提供了两种实用的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题

在下面这种情况：

<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>