0

我想知道为什么在使用.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.5for normal 和1.0for:hover吗？

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

4

2 回答 2

2

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

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

 #test:hover {
     opacity:1.0 !important;
 }
于 2012-08-31T04:27:47.763 回答
1

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

于 2012-08-31T04:28:30.200 回答