replace one div with another on hover

Question

I want to replace one div with another when hovering over it. Specifically there will be an average in words, such as "struggling" or "exceeding expectations", and I want to replace this with the numerical average when the user hovers over the average in words.

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

It's easy enough to hide the first div and replace it with the second, but the trouble is with the code to set things back to normal when hover ends. Now on hover, the divs just blink back and forth between each other.

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

Answer 1

Move the switch class to an outter div, like so

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

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

Updated Fiddle: http://jsfiddle.net/uXeg2/2/