将鼠标悬停在文本上时,文本会关闭然后再返回

时间:2015-10-24 03:12:41

标签: javascript jquery html css hover

我最好通过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”和“THIS”首先水平滑动,但最后它会向下和向后滑动。为什么是这样?如何修复它以便水平滑动?谢谢!

3 个答案:

答案 0 :(得分:1)

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

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

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

这种情况正在发生,因为$(".expand").show(6000);将元素的高度和宽度从零动画化为实际大小。当它几乎达到它们的实际尺寸时,由于这种变化会出现一点点移动。

答案 1 :(得分:1)

.show()也会更改元素的height

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

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

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

答案 2 :(得分:0)

您需要为<span>

提供相同的对齐方式
.there {
    font-weight: 300;
    vertical-align: top;
}

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