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

Question

我想将鼠标悬停在一个 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 很容易，但问题在于悬停结束时将一切恢复正常的代码。现在悬停时，div 只是在彼此之间来回闪烁。

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

Answer 1

像这样将 switch 类移动到外部 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();
});

更新 fiddle :http://jsfiddle.net/uXeg2/2/