简体繁体 English

CSS使用overflow：hidden显示div上方的活动元素

[英]CSS Show active element above the div with overflow:hidden

原文 2010-08-18 15:10:23 3 1 javascript/ jquery/ css/ xhtml

I have a scrolling pane div with overflow:hidden. 我有一个滚动窗格div与溢出：隐藏。 Please check it here . 请在这里查看。 There are products as images with captions shown in the scrolling pane. 有些产品是带有标题的图像，显示在滚动窗格中。 When I move mouse cursor over a product div, it gets light-yellow background and changes its height - I just add a class to the div using jQuery and it works fine. 当我将鼠标光标移动到产品div上时，它会变为浅黄色背景并改变其高度 - 我只是使用jQuery向div添加一个类，它工作正常。 The problem I need to solve some way is to show the expanded div for the active product as a separate div that appears above the scrolling pane, though now it appears inside that pane and extends it in its height. 我需要解决的问题是将活动产品的展开div显示为滚动窗格上方显示的单独div，但现在它显示在该窗格内并将其扩展到其高度。 I want to make it look in similar way to this one . 我想让它看起来与这个相似。 Here you move mouse cursor over the product and get an extended div showing you details. 在这里，您将鼠标光标移到产品上，然后获得一个扩展的div，显示详细信息。 Surely, my task is a little harder because of that scrolling pane. 当然，由于滚动窗格，我的任务有点难度。

1 个解决方案

Shouldn't be too difficult if you use the .offset() method on hover of a .product . 如果你使用的应该不会太困难.offset（）方法上的悬停.product 。 What you can do is the following: 你能做的是以下几点：

In your .product hover event handler, get the offset of the product. 在.product悬停事件处理程序中，获取产品的偏移量。 This will give you the position of your product in relation to the document. 这将为您提供与文档相关的产品位置。
Next create your overlay product information div and append it directly to the <body> . 接下来创建叠加产品信息div并将其直接附加到<body> 。
Set the overlay div to position: absolute and use the values returned from the offset call to position it. 将overlay div设置为position：absolute并使用偏移调用返回的值来定位它。
Lastly make sure your overlay has a higher z-index than the scrolling pane and you should be in business. 最后，确保您的叠加层具有比滚动窗格更高的z索引，并且您应该开展业务。