在jQuery中恢复到原来的CSS状态

Question

我正在寻找一种方法，让我的jQuery代码，当我悬停在我的一个元素(.pdf)，改变另一个元素(.dl)的字体颜色为蓝色，然后当我停止悬停在我的第一个元素(.pdf)的第二个元素回到原来的颜色。

我设法让这工作，但我也必须有另一个jQuery代码，当我悬停在第二个元素(.dl)，我的第一个元素(.pdf)变成蓝色，然后返回到它的原始状态，当悬停结束在我的第二个元素(.dl)。

我遇到的问题是，当我加载页面时，如果我悬停在我的第一个元素(.pdf)上，(.dl)变成蓝色，当我停止悬停时，它返回白色，但是当我悬停在(.dl)添加jQuery后，做。pdf悬停，(.dl)保持白色!

这是我的jQuery:

$(document).ready(function () {
$(".pdf").hover(function (f) {
        $(".dl a").css('color', '#33b5e5');
    },
    function (f) {
        $(".dl a").css('color', '#fff');
    });
});
$(document).ready(function () {
$(".dl").hover(function (g) {
        $(".pdfasdf").show();
        (".dl").show();
    },
    function (g) {
        $(".pdfasdf").hide();
        (".dl").hide();
    });
});

(有点乱，抱歉!)我是新的!)

和相关的CSS在我的jfiddle:jsfiddle

我基本上只需要知道是否有一种方法可以在jQuery中恢复到原始的CSS状态。我相信……(a:hover)被jQuery重写，告诉它变成白色时，不悬停在。pdf。

编辑我能够通过在我的CSS中添加。dl a:hover字体颜色后的!important来工作，但我仍然想知道是否有一个jQuery的方法来做到这一点，因为我的方式是相当草率的。

Answer 1

我建议使用jQuery的.addClass(classname)和.removeClass(classname)。

文档可以在这里和这里找到。

这样，你可以切换类，而不必担心特定的CSS状态。

更新小提琴。

Answer 2

为了将css参数还原为其原始值，使用.css(propertyName, value)方法和空value:

$(".dl a").css('color', '');

的例子:

var changed = false;
setInterval(function() {
  if (changed) {
    $("#container").css("text-align", "");
  } else {
    $("#container").css("text-align", "right");
  }
  changed = !changed;
}, 1000);

#container {
  background: green;
  height: 100px;
  width: 100px;
  color: white;
  text-align: left;
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  Text
</div>

同样的例子在jsfiddle: https://jsfiddle.net/v4h1spqL/

这在jQuery的文档中有描述:

将样式属性的值设置为空字符串(例如$( "#mydiv" ).css( "color", "" ))会将该属性从元素中移除如果它已经被直接应用，无论是HTML样式属性，通过jQuery的.css()方法，或通过直接DOMstyle属性的操作。