jQuery hover – replace div with another div

test.html

<!-- 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>

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

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

<!-- Style -->
<style>
.switch {
    border: 1px solid red;
}
.avg_num {
	display: none;
}
</style>


<!-- jQuery -->
<script>
$('.switch').hover(function() {
        $(this).find('.avg_words').hide();
        $(this).find('.avg_num').show();
    }, function() {
        $(this).find('.avg_num').hide();
        $(this).find('.avg_words').show();
});
</script>


<!-- NOTES: The script should be easy to follow. Questions, tweet me: @aatsol -->