Eu quero substituir um div por outro quando passar por cima dele. Especificamente, haverá uma média em palavras, como "lutando" ou "excedendo as expectativas", e quero substituí-lo pela média numérica quando o usuário paira sobre a média em palavras.

#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();
});

É fácil esconder o primeiro div e substituí-lo pelo segundo, mas o problema é com o código para definir as coisas de volta ao normal quando o foco terminar. Agora, em foco, odivs piscam para frente e para trás entre si.

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