Jquery 将一个div替换为另一个处于悬停状态的div

我想在将鼠标悬停在一个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();
});

#html
A+（悬停以查看分数）
平均值=98.35%
#css
.avg_num{
显示：无；
}
#jquery
$（'.switch'）.hover（函数（）{
$（this）.closest（'.avg_words'）.hide（）；
$（this）.next（'div'）.closest（'.avg_num'）.show（）；
}，函数（）{
$（this）.next（'div'）.closest（'.avg_num'）.hide（）；
$（this）.closest（'.avg_words'）.show（）；
});

隐藏第一个div并将其替换为第二个div很容易，但问题在于代码在悬停结束时将其设置回正常状态。现在悬停时，

div

s只是在彼此之间来回闪烁

---

闪烁是您设置类的方式造成的。由于

.switch

和

与

是完全相同的元素，因此会发生以下情况：

您将鼠标悬停在

上。切换

.avg_words

被隐藏，这意味着

.switch

被隐藏（它是同一个div！）

由于

.switch

是隐藏的，因此您不再将其悬停

.avg_words

立即显示

您现在再次将鼠标悬停在

.switch

，因为它刚刚显示（在步骤4中）

回到步骤1

---

相反，请确保

.switch

是一个包裹在

.avg_words

周围的元素，以便在悬停时不会隐藏它。

将switch类移动到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();
});

A+（悬停以查看分数）
平均值=98.35%
$（'.switch'）.hover（函数（）{
$（this.find（'.avg_words'）.hide（）；
$（this.find（'.avg_num'）.show（）；
}，函数（）{
$（this.find（'.avg_num'）.hide（）；
$（this.find（'.avg_words'）.show（）；
});

---

更新的Fiddle:

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

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

---

我会使用

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

---

这也可以在纯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
}

#html
A+（悬停以查看分数）
平均值=98.35%
#css
.avg_词{
显示：块
}
.avg_num{
显示：无
}
.switch:hover.avg_单词{
显示：无
}
.switch:hover.avg_num{
显示：块
}

我认为这可能是问题的一部分——我玩了一段时间，但由于div层的原因，无法让事情正常进行。（无法确定要使用的

下一个
的正确排列）。谢谢在选择器的上下文中查找搜索，您没有将其同时作为
div
s在同一级别上。嵌套并不总是使代码美观，但在这种情况下确实有帮助。@agrothe不是真的，hover适用于同一个元素，此替代方法适用于第一个元素，然后适用于第二个元素；）没错。我只是尽量避免自己编写这样的代码，但我想这只是个人的喜好。你怎么能只用CSS来完成呢？有什么好的资源吗？公认的答案是最好最简单的方法，我想我还是设法做到了：。欢迎提出任何建议哇，这是一个非常漂亮的解决方案，做得很好！
#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
}