replace one div with another on hover

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/

The blinking is a result of the way you set up your classes. Because .switch and .avg_words are the exact same element, this is what happens:

1. You hover .switch
2. .avg_words is hidden, which means .switch is hidden (it's the same div!)
3. Since .switch is hidden you are not hovering it anymore
4. .avg_words is shown immediately
5. You are now hovering .switch again because it was just shown (in step 4)
6. back to step 1

Instead, make sure .switch is an element wrapped around .avg_words, so that it does not get hidden once you hover it.

This could be done in pure CSS as well, no need to rely on JQuery :

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

#css
.avg_words {
  display:block
}

.avg_num {
  display:none
}

.switch:hover .avg_words {
  display:none
}

.switch:hover .avg_num {
  display:block
}