在悬停时用另一个替换一个 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 并用第二个替换它很容易，但问题在于当悬停结束时将其恢复正常的代码。现在悬停时，divs 只是在彼此之间来回闪烁。

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

Answer 1

这也可以在纯 CSS 中完成，无需依赖 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
}

Answer 2

我会为此使用 mouseover 和 mouseout：

$('.switch .avg_words').mouseover(function() {
    $(this).hide();
    $(this).closest('.avg_num').show();
});

$('.switch .avg_num').mouseout(function() {
    $(this).hide();
    $(this).closest('.avg_words').show();
});

Answer 3

您遇到了问题，因为您隐藏了与悬停事件绑定的相同元素。尝试更改您的标记：

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

然后把你的javascript改成这样：

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

Answer 4

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

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

Answer 5

闪烁是您设置课程方式的结果。因为.switch 和.avg_words 是完全相同的元素，所以会发生这种情况：

1. 你悬停.switch
2. .avg_words是隐藏的，也就是说.switch是隐藏的（是同一个div！）
3. 由于 .switch 已隐藏，您不再悬停它
4. .avg_words 立即显示
5. 您现在再次悬停.switch，因为它刚刚显示（在第 4 步中）
6. 返回步骤 1

相反，请确保 .switch 是一个包裹在 .avg_words 周围的元素，这样当您将其悬停时它就不会被隐藏。