jQuery取消鼠标悬停效果

Question

我有一个脚本，当鼠标悬停在段落内的链接上时会导致背景颜色变化。但是我不知道如何让它在“取消悬停”后返回原始背景颜色。

$(function(){
    $(".box a").hover(function(){
    $(this).parent().css('background-color', '#fff200');
    });
});

谢谢！

- user1754427

---

你可以考虑使用:hover伪类选择器，在CSS中完成此操作，而无需任何JavaScript。请参见http://quirksmode.org/css/selectors/hover.html - Brandon

我认为我不能仅使用CSS，因为我要更改父项的颜色。我认为你不能仅通过CSS选择父选择器。 - user1754427

Answer 1

下面的函数起到了onmouseover和onmouseout的作用。

$(function () {
    $(".box a").hover(function () {
        $(this).parent().css('background-color', '#fff200');
    }, function () {
        // change to any color that was previously used.
        $(this).parent().css('background-color', '#fff200');
    });
});

- meewog

---

这个完美运作（除了第二个背景颜色必须是原始颜色 - 在我的情况下是#fff - 而不是悬停颜色）。 - user1754427

我知道，这就是为什么我在那里放置了注释以更改为以前的颜色 :) 很高兴能帮助，不要忘记接受答案。 - meewog

Answer 2

JQuery

$(".box a").hover(function(){
    $(this).parent().css('background-color', '#fff200');
 }, function() {
     $(this).parent().css('background-color', '#ffffff');
 });

请查看示例。

- soyuka

Answer 3

jQuery文档中有一个鼠标移出处理程序。在那里，您需要将颜色返回到原始状态。如果您只是更改颜色，为什么不使用CSS呢？

$(function(){
    $(".box a").hover(function(){
        $(this).parent().css('background-color', '#fff200');
    },function(){
        $(this).parent().css('background-color', '#originalhexcolor');
    });
});

- Kaizen Programmer

---

我认为我不能仅使用CSS，因为我要改变父级项目的颜色。我认为你不能仅通过CSS选择父选择器。 - user1754427

我明白了，那么我想jQuery是最好的前进方式。 - Kaizen Programmer

Answer 4

如果必须使用jQuery，使用addClass()而不是css()：

$('.box a').hover(function(){
    $(this).closest('.box').addClass('hoveredOver');
}, function(){
    $(this).closest('.box').removeClass('hoveredOver');
});

使用CSS：

.hoveredOver {
    background-color: #fff;
}

JS Fiddle演示。

参考资料：

• addClass()。
• removeClass()。

- David Thomas