时间戳

首页 > 解决方案 > 如何让 div 在溢出时弹出？

javascript - 如何让 div 在溢出时弹出？

问题描述

在此处输入图像描述我想div(with className='invoice-info')在悬停时显示icon(which is in table cell)这样的：

<div
    style={{ position: "relative" }}
    onMouseEnter={() => setHoveredInvoiceId(result.gsCustomersID)}
    onMouseLeave={() => setHoveredInvoiceId()} >
    <i className="icon-container invoice-icon" id={"csInvoiceIcon" + 
         result.gsCustomersID}></i>
    <div className="invoice-info">Hello</div> //this is displayed conditionally
</div>

我为 div 写了一些样式，如下所示：

.invoice-info {
    position: absolute;
    background-color: red;
    width: 10vw;
    height: 10vh;
    z-index: 10;
    left: 1em;
    bottom: -6em;
}

但是由于 的宽度table-cell小到只能容纳图标，所以 div 被隐藏了。我给了 z-index 让它浮动，但它不起作用。我想要一个悬停时的浮动 div。有人可以帮助我吗？

标签： javascripthtmlcssreactjs

解决方案

发票单元格具有overflow:hidden属性。将其更改为后有效overflow:visible

推荐阅读