在jquery中恢复原始的css状态?

时间:2013-06-04 00:02:40

标签: jquery css

我正在寻找一种方法来获取我的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中添加一个!important之后的!important来实现它的工作,但是我仍然想知道是否有一种jquery方式这样做,因为我的方式非常草率。

1 个答案:

答案 0 :(得分:1)

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

可以找到文档herehere

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

更新了fiddle