我在Fiddle中有以下代码。
我试图在右上角的 div 中的两段文本之间交替。当我将鼠标悬停在 div 上并上下移动时,文本会按预期交替。悬停时,当前文本隐藏并显示隐藏文本。在悬停时,会发生同样的事情。
但是当我将鼠标悬停在它上面并向左移动时,当前文本不会消失,隐藏文本也不会出现(这是预期的行为)。
我发现,这是一个文本宽度不等的问题。如果我将宽度设置为 100 像素,那么它可以工作。
我不想设置宽度,因为该 div 中的文本长度可变。
发生了什么,如何在不将宽度设置为固定数字的情况下修复它?
HTML:
<div class="topBar">
<div class="item2" id = "i1">
0123456789
</div>
<a class="item2" id = "i2" href="#">
9876
</a>
</div>
CSS:
.topBar {
position: fixed;
width: 100%;
height:50px;
top: 0;
min-width:480px;
border:1px solid red;
z-index:1000;
}
.item2 {
position:absolute;
right:0;
border-left: 1px solid black;
border-right: 1px solid black;
height:50px;
}
#i2 {
display:none;
}
JavaScript
$("#i1").hover(
function() {
$(this).hide();
$("#i2").show()
},
function() {
}
);
$("#i2").hover(
function() {
},
function() {
$(this).hide();
$("#i1").show()
}
);
编辑:
我通过这样做来破解它并且它有效
$("#i2").width($(this).width());
但我仍然想知道正确的答案。