Chcę zamienić jeden div na inny, gdy nad nim znajduje się kursor. W szczególności będzie średnia w słowach, takich jak „zmaganie się” lub „przekraczanie oczekiwań”, i chcę zastąpić to średnią liczbową, gdy użytkownik unosi się nad średnią słów.

#html

<div class="switch avg_words float_left">
  A+ (hover to see score)  
</div>
<div class="avg_num">
  AVG = 98.35%
</div>

#css

.avg_num {
display: none;
}

#jquery

$('.switch').hover(function() {
    $(this).closest('.avg_words').hide();
    $(this).next('div').closest('.avg_num').show();
}, function() {
    $(this).next('div').closest('.avg_num').hide();
    $(this).closest('.avg_words').show();
});

Łatwo jest ukryć pierwszy div i zastąpić go drugim, ale problem polega na tym, że kod powraca do normalnego stanu po zakończeniu aktywowania. Teraz na zawisiedivpo prostu migają między sobą.

http://jsfiddle.net/uXeg2/1/