Question

我在Fiddle中有以下代码。

我正在尝试在右上角的div中的两段文本之间切换。当我将鼠标悬停在div上并上下移动时，文本会按预期交替显示。在悬停时，将显示当前文本隐藏和隐藏文本。在徘徊时，同样的事情发生了。

但是当我将鼠标悬停在左侧并向左移动时，当前文本不会消失，并且不会显示隐藏文本（这是预期的行为）。

我发现，它是文本宽度不等的问题。如果我将宽度设置为100px，则可以正常工作。

我不想设置宽度，因为该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());

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

Answer 1

以下是发生的事情

当你向左移动时，$("#i2").hover正在触发，但因为#i1 更宽 ，你会立即“徘徊”在它上面它会重新触发$("#i1").hover，这就是#i2显示的内容。当然，现在您不会将鼠标悬停在#i2上，因此您必须重新输入它，然后向上或向下移动以触发其退出而不重新触发#i1功能。

我无法想到处理这种情况的优雅方式，而不是宽度相等（无论是通过CSS还是通过javascript设置）。

悬停在宽度不等的重叠div上

1 个答案:

以下是发生的事情