27

我有一个滚动 DIV，其中包含许多项目的列表：

 ___________
|         |^|
| Item1   | |
|_________| |
|         | |
| Item2   | |
|_________| |
|         | |
| Item3   | |
|_________|v|

当用户滚动列表项时，会出现一个描述该项目的弹出窗口：

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|____________________
| Item2 | Description for item 2 |
|________------------------------
|         | |
| Item3   | |
|_________|v|

困境是滚动的 div 必须有溢出：自动，但弹出窗口希望在 div 之外可见。所以目前，我的弹出窗口被砍掉了：

 ___________
|         |^|
| Item1   | |
|_________| |
|        _|_|
| Item2 | De|
|________---|
|         | |
| Item3   | |
|_________|v|

HTML

<div id="box">
  <ul>
    <li>
       <h2>Item 1</h2>
       <span>Description for item 1</span>
    </li>
    <li>
       <h2>Item 2</h2>
       <span>Description for item 2</span>
    </li>
    <!-- ... and many other items --->
  </ul>
</div>

CSS

#box {
   width: 10em;
   height: 20em;
   overflow: auto;
}

#box ul {
   line-height: 2em;
}

#box ul li {
   position: relative;
}

#box ul li span {
   display: none;
   position: absolute;
   right: -1em;
   top: 1em;
   height: 1em;
}

#box ul li:hover span {
   display: block;
}
4

2 回答 2

3

您可以尝试在弹出元素上使用 position:fixed 进行试验，看看是否对您有帮助：

http://jsfiddle.net/SpEb2/

于 2012-08-21T22:03:28.637 回答
0

我会建议你做其他事情来解决这个问题。如果你使用 JavaScript，你可以专门为弹出框制作一个模块。因此，每当您想在当前页面中弹出窗口时，只需包含该模块即可。

您可以将该模块 html 和 JavaScript 混合在一起，并带有一个具有绝对位置的隐藏弹出 div。每当您将光标移到页面上启用工具提示的某个元素上时，只需调用 JavaScript 函数将隐藏的弹出窗口带到光标（或元素）所在的位置并显示带有适当信息的弹出窗口。

这种实现可以使您的弹出系统非常模块化和适应性强，您可以在整个网站中拥有统一的弹出窗口，并且可以非常轻松地修改其属性。

于 2012-08-21T22:12:16.683 回答