javascript - 如何强制 div 在悬停时溢出 ul 容器？

Question

如何让嵌套在 ul 中的任意 div 溢出到设置为 width 的 ul 之外: 160px; 和 overflow-y: hidden;?我已将其设置为 overflow-y: hidden 因为列表需要可滚动。

这是我的 list :

  <ul>
      <li> color name</li>
      <div class="tooltip">color name</div>
      <li> color name</li>
      <div class="tooltip">color name</div>
      <li> color name</li>
      <div class="tooltip">color name</div>
    .....
    </ul>

对于文本宽度超过 160 像素的名称，我需要一个悬停事件来显示工具提示元素的文本，并且我希望该文本溢出其容器 ul。

我已阅读以下资源，但没有一个对我有帮助:

• > Allow specific tag to override overflow:hidden
• > Hovered element to overflow out from an overflow:hidden element css
• > https://css-tricks.com/popping-hidden-overflow/
• > CSS spread <li> horizontally across <ul>
• > Why does inner DIV spills out of outer DIV?
• > http://front-back.com/how-to-make-absolute-positioned-elements-overlap-their-overflow-hidden-parent
• > What causes a parent container to cut off content in child element?
• > https://medium.freecodecamp.org/a-step-by-step-guide-to-making-pure-css-tooltips-3d5a3e237346

Answer 1

如果我正确理解你的情况，可以通过将 z-index 属性应用于 ::after 接收内容的伪元素来解决问题 :悬停。

这会创建一个由悬停状态触发的“工具提示”，并将“溢出”任何父 div，而不管父级的 overflow 属性如何。作为奖励，它不会使您的列表中带有流氓标签的标记无效。

HTML

<ul class="list">
  <li class="list-item">color</li>
</ul>

CSS

.list {
  border: 1px solid black; //to see element boundary
  overflow: hidden;
  width: 160px;
}

.list-item::after {
  content: '';
}

.list-item:hover::after {
  background-color: gray; //aesthetic only
  content: 'long tooltip text about the color';
  margin-left: 5px; //aesthetic only
  position: absolute;
  z-index: 999;
}

Example on Codepen