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

【问题标题】：hover on overlap divs with unequal width悬停在宽度不等的重叠 div 上
【发布时间】：2013-07-12 17:31:06
【问题描述】：

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

但我还是想知道正确答案。

【问题讨论】：

好问题，下次别忘了用标题分隔每个不同的代码以方便操作，并使用内置链接工具将文本链接到您为小提琴准备的 url在顶部。
您是否尝试过设置width: auto; 以适应不同长度的文本。您也可以将页面加载时显示的 div 中的文本替换为悬停时应显示的文本。
感谢回复。宽度：自动没有工作。我会尝试另一个建议。但是，除了文本之外，还有其他区别。我想知道它是否可能是我这样做的方式。

标签： javascript jquery html css jquery-hover

【解决方案1】：

这是发生了什么

当您向左移动时，$("#i2").hover 正在触发，但是因为#i1 是更宽，您会立即“悬停”在它上面并且它重新-触发$("#i1").hover，这是保持#i2 显示的原因。当然，现在你不是悬停在#i2上，所以你必须重新进入它，然后移出顶部或底部来触发它的退出，而不需要重新触发#i1函数。

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

【讨论】：