使用 jQuery 的 .css() 会覆盖 CSS 中的伪类吗？答案

【问题标题】：Does using .css() of jQuery override pseudo class in CSS?使用 jQuery 的 .css() 会覆盖 CSS 中的伪类吗？
【发布时间】：2012-08-31 15:05:58
【问题描述】：

我想知道为什么在使用.css() 函数时，它会覆盖CSS 中的伪类，例如:hover。它不应该只影响元素的正常状态，而不是:hover 吗？还是我做错了什么？

这是一个例子

<!DOCTYPE html>

<html>  
  <head>
    <style>
      #test {
        background : red;
        width: 50px;
        height: 50px;
        opacity : 0.2;
      }

      #test:hover {
        opacity:1.0;
      }
    </style>

    <script type="text/javascript" src="../jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
      $(function () {
        $('#test').css('opacity', '0.5');
      });
    </script>
  </head>

  <body>
    <div id="test"></div>
  </body>
</html>

当页面加载时，我得到的 div 只有opacity = 0.5，对于普通和:hover。不应该是 0.5 for normal 和 1.0 for :hover 吗？

我的问题是如何防止这种情况发生？

【问题讨论】：

.css() 编辑元素内联样式，从而覆盖您预定义的 CSS。
删除 javascript 并在测试中添加不透明度 0.5，然后检查它是否可以正常工作的页面......

标签： jquery css pseudo-class

【解决方案1】：

.css() 将 inline 样式应用于所选元素，并且根据 cascading 样式的规则，内联样式的优先级高于您的样式样式表。

您可以使样式表中的类比内联样式更重要，如下所示：

 #test:hover {
     opacity:1.0 !important;
 }

【讨论】：

【解决方案2】：

最好的方法是不要设置 opacity 的值，而是使用 addClass()、removeClass() 或 toggleClass() 进行任何更改。

【讨论】：