Question

如何将div嵌套在ul之外的ul嵌套，width: 160px;设置为overflow-y: hidden;和overflow-y: hidden？我已将其设置为<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>，因为列表需要可滚动。

这是我的清单：

ul

对于文本宽度超过160像素的名称，我希望悬停事件显示工具提示元素的文本，我希望此文本溢出其容器外部{{1}}。

我已阅读以下资源，但他们都没有帮助我：

Answer 1

首先，您应该修复HTML。只有LI元素可以是UL元素的直接子元素。在这种特殊情况下，无效的HTML不太可能给你带来任何问题，但你应该总是努力编写有效的HTML，因为你永远不知道会出现什么奇怪的问题。

接下来，如果您的父overflow: hidden上有UL，那么在没有涉及到javascript的情况下，您无法真正做到。大多数＆＃34;工具提示＆＃34;库类型将为您处理：

在悬停时，制作UL 之外的DIV的副本（最好在文档根目录 - BODY的直接子代）
定位复制的DIV，使其显示在原始DIV的顶部（或旁边） - 这需要JavaScript，我将作为OP的练习而离开
当用户不再悬停时删除副本。

同样，大多数＆＃34;工具提示＆＃34;图书馆已经为你做了这件事。您可能必须编写自定义CSS以使工具提示在和现有元素之上显示而不是旁边的。

Answer 2

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

这会创建一个由悬停状态触发的“工具提示”，无论父级overflow属性如何，都会“溢出”任何父div。作为奖励，它不会使您的标记中的恶意标记无效。

<强> 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

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

2 个答案: