Twitter Bootstrap 走马灯，如何在走马灯上覆盖 div 但保持导航可用？

Question

Twitter Bootstrap 走马灯，如何在走马灯上覆盖 div 但保持导航可用？

csstwitter-bootstrapoverlayz-indexcarousel

3

我试了很长时间想在Twitter Bootstrap上叠加内容。

只需在轮播图的顶部叠加一个div，而不会防止轮播导航不再可点击+防止幻灯片（我正在使用300像素高度的图片）覆盖div的内容。（该div是导航菜单）

迄今为止尝试了多次并制作了一个jsfiddle：

.outer {
    position: relative;
}
.ontop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    z-index: 99999;
}

#wrapper_slider{
    height: 360px;
    background-color: red;
    border: solid red 10px;
}


#bar{
    height: 40px;
    background-color: green;

}

http://jsfiddle.net/bM32G/5/

谁知道如何正确处理这个问题？

（注：本文涉及IT技术领域，下同）

- Rubytastic

1个回答

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

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

- Trevor · Accepted Answer

使用CSS的pointer-events:none;应该可以解决问题。

在IE 10上它可以工作，但不像在Chrome/Firefox/Safari上那样好，你必须准确地指向链接才能看到它们是可点击的。我没有IE 11来测试它。

因此，在旧版本的Internet Explorer上仍可能存在问题...但这似乎是最新浏览器的可行解决方案。

.ontop {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right:0;
    z-index: 99999;
    pointer-events:none;
}

http://jsfiddle.net/trevordowdle/bM32G/6/

这里有一个你可能会觉得有用的问题：

单击 DIV 以访问底层元素

在这种情况下，为 IE 提供了一种解决方法，但我不知道它是否适用于你的情况。但你可以从中获得一些想法。