jquery un-hover

Question

Ich habe dieses Skript, um eine Hintergrundfarbe auf einen Absatz auf den Mauszeiger innerhalb des Absatzes zu verursachen. Was ich nicht weiß, ist, dass es zur ursprünglichen Hintergrundfarbe zurückkehrt, sobald ich "abhebe".

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

Vielen Dank!

Answer 1

Die untenstehende Funktion arbeitet als Onmouseover und 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

Es gibt einen Hover-Out-Handler in der jQuery documentation. Dort sollten Sie die Farbe auf das Original zurücksetzen. Wenn Sie nur die Farbe ändern, warum nicht CSS?

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

Answer 3

JQuery

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

Siehe fiddle.

Answer 4

Wenn Sie jQuery dafür verwenden müssen, verwenden addClass() statt css():

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

Mit dem CSS:

.hoveredOver { 
    background-color: #fff; 
} 

JS Fiddle demo.

Referenzen:

• addClass().
• removeClass().