CSS - 外部元素宽度未被覆盖

Question

的jsfiddle： https://jsfiddle.net/zem4c7wf/

所以我要做的是让文本元素具有短宽度限制，就像它存在于左窗格中一样。 （此示例中为.under＆amp; width: 160px）

将鼠标悬停在其上时，会在其上方显示另一个文字元素（.over＆amp; width: 300px）。但是，.over文本元素不尊重我给它的宽度，而是偏离它的父宽度（.under）

我尝试使用z-index和position：absolute，但我无法让悬停文本完全显示。

任何帮助将不胜感激！谢谢！

注意：我无法让JSFiddle模仿我在网站上看到的行为，但是当尝试使溢出可见时，它只是添加一个水平滚动条而不是将悬停文本完全带到最前面。 （悬停文字是黑线）

Answer 1

您可以在overflow: visible; div悬停时添加.under来解决此问题。

<强> CSS

.under:hover {
  overflow: visible;
}

.under {
  width: 160px;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}

.over {
    visibility: hidden;
    background-color: black;
    color: #fff;
    border-radius: 6px;
    padding: 5px 0;

    position: absolute;
    top: -5px;
    left: 0%;
    z-index: 1;

    width: 300px;
}

.under:hover {
  overflow: visible;
}

.under:hover .over {
  visibility: visible;
}

<div class="under">
Something long and cut off
  <span class="over">
    Something long and NOT cut off
  </span>
</div>

<强> JSFiddle

Answer 2

只需删除溢出：隐藏在类“.under”

中