当鼠标悬停在文本上时，文本会向下移动，然后向上移动

When hover over text, the text goes down and then back up

本文关键字：文本 移动 然后 鼠标 悬停      更新时间：2023-09-26

最好通过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。

正如你所看到的，随着文本的展开，"WHY"answers"THIS"一开始是水平滑动的，但在最后它会向下滑动，然后再向上滑动。为什么会这样?我怎么修复它，让它都水平滑动?谢谢你！

你应该浮动元素，以便它正常工作:

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

这是因为$(".expand").show(6000);将元素的高度和宽度从0动画到它们的实际大小。当它接近实际大小时，就会出现一些移动

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

尝试用.fadeTo()代替.show() 

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

jsfiddle https://jsfiddle.net/aajvmLxq/5/

你需要给这些<span>相同的对齐

.there {
    font-weight: 300;
    vertical-align: top;
}
.expand {
    display: none;
    vertical-align: top;
}
相关文章：