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

时间:2010-08-18 15:10:24

标签: javascript jquery css xhtml

我有一个带有overflow:hidden的滚动窗格div。请检查here。有些产品是带有标题的图像,显​​示在滚动窗格中。当我将鼠标光标移动到产品div上时,它会变为浅黄色背景并改变其高度 - 我只是使用jQuery向div添加一个类,它工作正常。我需要解决的问题是将活动产品的展开div显示为滚动窗格上方显示的单独div,但现在它显示在该窗格内并将其扩展到其高度。我想让它看起来与this one类似。在这里,您将鼠标光标移到产品上,然后获得一个扩展的div,显示详细信息。当然,由于滚动窗格我的任务有点困难。

1 个答案:

答案 0 :(得分:2)

如果您在.product的鼠标悬停时使用.offset() method,则不应太困难。你能做的是以下几点:

  1. .product悬停事件处理程序中,获取产品的偏移量。这将为您提供与文档相关的产品位置。
  2. 接下来,创建叠加层产品信息div并将其直接附加到<body>
  3. 将overlay div设置为position:absolute并使用偏移调用返回的值来定位它。
  4. 最后确保您的叠加层具有比滚动窗格更高的z索引,并且您应该开展业务。