jQuery CSS 方法覆盖 :hover 属性答案

【问题标题】：jQuery's CSS method overriding :hover propertiesjQuery CSS 方法覆盖 :hover 属性
【发布时间】：2023-03-28 13:40:01
【问题描述】：

<script>
    $(function(){
        $("a.load").click(function (e) { 
            e.preventDefault();
            $("#main").load($(this).attr("href"));
            // alert("#"+($(this).attr("id")));
            $("."+($(this).attr("class"))).css('border-bottom', 'solid 1px black');
            $("."+($(this).attr("class"))).css('background-color', '#F5F5F5');
            $("#"+($(this).attr("id"))).css('border-bottom', 'solid 2px white');
            $("#"+($(this).attr("id"))).css('background-color', 'white');

        });
    });
</script>

上述函数按预期工作，尽管我的一个类的 :hover 属性在调用此函数后停止工作。因此，jQuery 的 CSS 方法似乎覆盖了 :hover 属性。有解决办法吗？

我尝试在函数末尾添加：

$("."+($(this).attr("class"))+":hover").css('border-bottom', 'solid 2px white');

但没用。

【问题讨论】：

让我们看看带有:hover的css。
$("#"+($(this).attr("id")))和$(this)有什么区别？
第一个将返回#contact，第二个：contact。在 CSS 开头没有 # 的属性 id 的值将被视为元素，而不是 id。

标签： javascript jquery css hover

【解决方案1】：

我刚刚发现了 !important 标签，它完成了工作！没有更多的压倒一切！

border-bottom-color: white !important;
border-bottom-width: 2px !important;
background-color: white !important;

【讨论】：

恕我直言，使用!important 并不是解决此问题的最佳方式。
可能不是最好的方法，但它就像一个魅力，可以快速解决截止日期。谢谢！

【解决方案2】：

jQuery 不是用来处理 CSS 的。 DOM 中不存在伪选择器。

相反，提取您的 css，并使用 jQuery 切换类 (addClass/removeClass/toggleClass)

【讨论】：