twitter bootstrap carousel，在旋转木马顶部覆盖div但保持导航工作

Question

我试图在Twitter引导程序之上叠加内容太久了。

只需在旋转木马的顶部上叠加一个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/

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

Answer 1

使用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/

以下是您可能会觉得有用的问题：

Click through a DIV to underlying elements

在这种情况下，为IE提供了一个解决方案，但我不知道它在这种情况下适用于你。但你可以得到一些想法。