如何让嵌套在 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
最佳答案
如果我正确理解你的情况,可以通过将 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;
}
关于javascript - 如何强制 div 在悬停时溢出 ul 容器?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50730452/