javascript - 将鼠标悬停在文本上时，文本会下降然后返回

Question

最好通过 jsfiddle 来展示它:

https://jsfiddle.net/aajvmLxq/

HTML:

<span class="there">WHY</span><span class="expand">does</span><span class="there">THIS</span><span class="expand">notwork</span>

CSS:

.there {
    font-weight: 300;

}

.expand {
     display: none;
}

JS/JQUERY:

$(".there").hover(function() {
    $(".expand").show(1000);
});

这只是js，但css或html可能有问题。

正如您所看到的，随着文本展开，“为什么”和“这个”首先水平滑动，但最后它会向下然后向上移动。为什么是这样？我该如何修复它，使其全部水平滑动？谢谢你!

Answer 1

您应该 float 元素才能正常工作:

.there {
    font-weight: 300;
    float:left;
}

.expand {
    display: none;
    float: left;
}

发生这种情况是因为 $(".expand").show(6000); 将元素的高度和宽度从零设置为实际大小。当它几乎达到实际大小时，会因为变化而出现一些移动。