jquery - jquery取消悬停

Question

我有这个脚本可以在段落中的链接悬停时在段落上产生背景颜色。我不知道该怎么做，一旦我“取消悬停”，它就会返回原始背景颜色。

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

谢谢！

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');
    });
});

Answer 2

jQuery

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

见小提琴。

Answer 3

jQuery 文档中有一个悬停处理程序。那就是您想要将颜色恢复为原始颜色的地方。如果你所做的只是改变颜色，为什么不使用 CSS 呢？

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

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 小提琴演示。

参考：

• addClass().
• removeClass().