CSS显示活动元素，使其位于具有overflow:hidden的div上方。

Question

CSS显示活动元素，使其位于具有overflow:hidden的div上方。

3

我有一个带有overflow:hidden的滚动面板div，请在这里查看。滚动面板中显示了带标题的产品图片。当我将鼠标光标移动到产品div上时，它会变成浅黄色的背景并改变其高度 - 我只需使用jQuery向div添加一个类即可正常工作。我需要解决的问题是以某种方式显示活动产品的扩展div，该div作为单独的div出现在滚动面板上方，尽管现在它出现在该面板内并延伸其高度。我想使它看起来类似于这个。在这里，您将鼠标光标移到产品上并获得显示详细信息的扩展div。当然，由于滚动面板的存在，我的任务要更难一些。

- Sergei Basharov

这并不是一件容易的事情。就我个人而言，你可能需要从HTML结构中原始位置上撕裂/克隆整个产品“div”，然后在进行高亮之前将其AP。这可能会非常快速地变得非常丑陋。 - Yi Jiang

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Pat · Accepted Answer

如果您在.product上使用.offset()方法，那么这不应该太困难。您可以按照以下步骤操作：

在您的.product悬停事件处理程序中，获取产品的偏移量。这将为您提供产品相对于文档的位置。
接下来创建覆盖产品信息的div，并将其直接附加到<body>中。
将覆盖div设置为position: absolute，并使用从偏移调用返回的值进行定位。
最后，请确保您的覆盖层具有比滚动窗格更高的z-index，这样您就可以开始了。