将鼠标悬停在文本上时，文本会下降然后备份答案

【问题标题】：When hover over text, the text goes down and then back up将鼠标悬停在文本上时，文本会下降然后备份
【发布时间】：2015-10-24 11:43:04
【问题描述】：

我最好通过 jsfiddle 来展示这一点：

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有问题。

如您所见，随着文本的展开，“WHY”和“THIS”起初会水平滑动，但最后会向下并向上滑动。为什么是这样？如何修复它，使其全部水平滑动？谢谢！

【问题讨论】：

【解决方案1】：

您应该浮动元素以使其正常工作：

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

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

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

【讨论】：

【解决方案2】：

.show() 也改变了元素的height。

尝试将.fadeTo() 替换为.show()

$(".expand").fadeTo(1000, 1);

【讨论】：

【解决方案3】：

您需要为<span> 提供相同的对齐方式

.there {
    font-weight: 300;
    vertical-align: top;
}

.expand {
    display: none;
    vertical-align: top;
}

【讨论】：