jquery un-hover

时间:2013-03-07 16:06:21

标签: jquery

我有这个脚本在段落中链接悬停的段落上产生背景颜色。我不知道怎么做是因为一旦我“悬停”它就会恢复原来的背景颜色。

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

谢谢!

4 个答案:

答案 0 :(得分:30)

以下功能可用作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');
    });
});

答案 1 :(得分:2)

<强> JQuery的

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

请参阅fiddle

答案 2 :(得分:1)

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

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

答案 3 :(得分:1)

如果您必须使用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 demo

参考文献: