1

我在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());

但我仍然想知道正确的答案。

4

1 回答 1

1

这是正在发生的事情

当您向左移动时,正在$("#i2").hover触发,但由于较宽#i1,您会立即“悬停”在它上方,并且它正在重新触发$("#i1").hover,这就是保持#i2显示的原因。当然,现在您没有将鼠标悬停在 上#i2,因此您必须重新进入它,然后移出顶部或底部以触发其退出,而无需重新触发该#i1功能。

我想不出比让宽度相等(无论是由 CSS 还是由 javascript 设置)更优雅的方式来处理这种情况。

于 2013-07-15T01:03:24.633 回答