2

我正在尝试开发类似于以下内容的页面：http: //jsfiddle.net/fatgamer85/677U8/7/

我有一个固定的侧边栏 div，其中包含会弹出子菜单或 div 的菜单项列表。我正在使用一个名为 SlimScroller 的 jquery 库来为固定侧边栏 div 创建一个 facebook 样式的滚动条。我在侧面有另一个 div，里面有一张地图，底部有一个 div，它是一个固定的页脚。

页面的布局方式是侧边栏占屏幕的 15%，其余部分由地图区域占据。

当我将鼠标悬停在侧边栏中的列表项上时，我希望看到子菜单在悬停时弹出。由于溢出被隐藏，这不会发生，如图所示：

溢出隐藏

.page-sidebar {
    overflow: hidden;
}

但是，当我使用“！important”关键字强制显示侧边栏的溢出时，我可以看到我的子菜单在悬停时弹出：

溢出强制可见

.page-sidebar {
    z-index: 1000 !important;
    overflow: visible !important;
}

我尝试使用 JavaScript 更改悬停时的 CSS，但由于某种原因这不起作用。

编辑：

有没有一种解决方案可以确保侧边栏滚动以及我可以在使用或不使用 JavaScript 的情况下获得弹出窗口？

我目前已经添加了类 .page-sidebar 以使弹出窗口出现。通过这样做，侧边栏不会滚动。如果我删除 .page-sidebar 类，侧边栏会再次滚动，但这次不会出现弹出窗口。

我究竟做错了什么？

4

0 回答 0