CODEWITHSUNDEEP
jquery
user1754427
user1754427

Reputation: 201

jquery un-hover

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!

Upvotes: 15

Views: 36206

Answers (4)

meewog
meewog

Reputation: 1740

The function below works as onmouseover and 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');
    });
});

Upvotes: 36

David Thomas
David Thomas

Reputation: 253318

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

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

With the CSS:

.hoveredOver {
    background-color: #fff;
}

JS Fiddle demo.

References:

Upvotes: 1

soyuka
soyuka

Reputation: 9105

JQuery

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

See fiddle.

Upvotes: 2

Kaizen Programmer
Kaizen Programmer

Reputation: 3818

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?

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

Upvotes: 1

Related Questions