悬停时将一个div替换为另一个div

Question

我想在悬停在它上面时将一个div替换为另一个div.具体来说,将会有一个单词的平均值,例如"挣扎"或"超出预期",并且当用户徘徊在单词中的平均值时,我想用数字平均值替换它.

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

很容易隐藏第一个div并用第二个div替换它,但问题是代码在悬停结束时将事情恢复正常.现在,在悬停时,divs只是在彼此之间来回眨眼.

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

Answer 1

将开关类移动到outter 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>

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

更新小提琴:http://jsfiddle.net/uXeg2/2/