Question

我希望在悬停在它上面时将一个div替换为另一个div。具体来说，将会有一个平均值，例如＆＃34;奋斗＆＃34;或者＆＃34;超出预期＆＃34;，当用户在文字中平均超过平均值时，我想用数字平均值替换它。

#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

将开关类移动到外部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 2

闪烁是您设置课程的结果。由于.switch和.avg_words是完全相同的元素，因此会发生以下情况：

您将鼠标悬停在.switch
.avg_words被隐藏，这意味着.switch被隐藏（它是同一个div！）
由于隐藏了.switch，您不再徘徊
.avg_words
您现在再次悬停.switch，因为它刚刚显示（在步骤4中）
回到第1步

相反，请确保.switch是一个包裹在.avg_words周围的元素，以便在将鼠标悬停时不会隐藏它。

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

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

我会使用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();
});

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

5 个答案: