7

将鼠标悬停在一个 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/

4

5 回答 5

11

将 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/

于 2013-09-27T15:11:50.953 回答
4

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

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

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

于 2013-09-27T15:09:56.787 回答
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
}
于 2020-01-22T13:32:28.150 回答
2

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

<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();
});
于 2013-09-27T15:12:38.647 回答
1

我会使用mouseoverandmouseout为此：

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

$('.switch .avg_num').mouseout(function() {
    $(this).hide();
    $(this).closest('.avg_words').show();
});
于 2013-09-27T15:13:06.737 回答