jQuery jquery取消悬停

jquery un-hover

提问by user1754427

I have this script to cause a background color on a paragraph on hover of link within the paragraph. What I don't know how to do is cause it to return to the original background color once I "un-hover".

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

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

Thanks!

谢谢！

回答by Mehrdad Dastgir

The function below works as onmouseover and onmouseout

下面的函数用作 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');
    });
});

回答by soyuka

JQuery

查询

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

See fiddle.

见小提琴。

回答by Kaizen Programmer

There is a hover out handler in the jQuery documentation. That's where you'd want to return the color to the original. If all you are doing is changing color, why not use CSS?

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

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

回答by David says reinstate Monica

If you must use jQuery for this, use addClass()rather than css():

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

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

With the CSS:

使用 CSS：

.hoveredOver {
    background-color: #fff;
}

JS Fiddle demo.

JS小提琴演示。

References:

参考：

• addClass().
• removeClass().

• addClass().
• removeClass().