如何在溢出时弹出一个div？

Question

我想在icon(which is in table cell)悬停时显示一个div(with className='invoice-info') ，如下所示：

<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。 有人可以帮助我吗？

Answer 1

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

Answer 2

您可以使用 CSS 而不是 JS，这将获得一些性能提升。

你可以使用这样的东西：

.invoice-info{
   display: none;
   // your other styling
}

.icon-class:hover ~ .invoice-info{
 display: block;
}

~ 是 CSS 中的通用兄弟选择器