jquery - 在 jQuery 中恢复到原始 CSS 状态？

Question

我正在寻找一种方法来获取我的 jQuery 代码，当我将鼠标悬停在我的一个元素 (.pdf) 上时，将另一个元素 (.dl) 的字体颜色更改为蓝色，然后当我停止悬停时在我的第一个元素 (.pdf) 上，第二个元素恢复到原来的颜色。

我设法让它工作，但我还必须有另一个 jQuery 代码，当我将鼠标悬停在第二个元素 (.dl) 上时，我的第一个元素 (.pdf) 变为蓝色，然后返回到其原始状态当鼠标悬停在我的第二个元素 (.dl) 上时。

我遇到的问题是当我加载页面时，如果我将鼠标悬停在我的第一个元素 (.pdf) 上，(.dl) 变为蓝色，当我停止悬停时它返回白色，但是当我将鼠标悬停在 ( .dl) 添加执行 .pdf 悬停的 jQuery 后，(.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();
    });
});

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

以及我的 jfiddle 中的相关 CSS: jsfiddle

我基本上只需要知道是否有办法在 jQuery 中恢复到原始 CSS 状态。我相信 (.dl a:hover) 被 jQuery 覆盖，告诉它在不悬停在 .pdf 上时变为白色。

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

Answer 1

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

可以找到文档here和 here .

这样，您只需切换类，而不必担心特定的 CSS 状态。

已更新 fiddle .