1

我正在为一个朋友做一个网站，背景是这个部分打开的窗帘png，就像一个舞台。该网站的内容位于幕布的左右两侧。顶部还挂着窗帘。内容使用 div 作为幻灯片上下滚动，其中所有 'slide' div 都包含在 'slides' div 中。上下滚动通常会使幻灯片在顶部的窗帘“上方”滚动，但我将容器的 z-index 更改为 -1，以便幻灯片在窗帘“下方”滑动。

但是现在由于 -1 z-index 强制“幻灯片”位于主平面下方，因此主平面阻止了通常会发生的任何类型的点击事件 - 即幻灯片上的一个按钮会导致其他幻灯片。

我不确定如何解决这个问题。我需要容器上的 -1 z-index 以保持幻灯片在下方滑动，但主平面阻止了对这些幻灯片的任何点击。

有任何想法吗？

.container {
  pointer-events: none;

 a {
  text-decoration: none;
  color: #FFF;
 }

 position: relative;
 background-image: url('../images/curtains.png');
 background-repeat: no-repeat;
 background-size: cover;
 background-attachment: fixed;
 background-position: 0 -100px;

.slide {
  pointer-events: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 880px;
  background-color: #000;
  color: #FFF;
  text-align: center;
  z-index: -1;
  pointer-events: none;

.content {
  position: relative;
  width: 800px;
  margin: 0 auto;
  background-color: green;
}
4

1 回答 1

0

您可以使用pointer-events:none(css) 来防止幕布捕获您的事件。

如果您需要对旧版浏览器的支持，您可以通过监听窗帘上的鼠标事件来破解您的方式。当幕布接收到鼠标事件时，您隐藏幕布并重新触发事件以到达幻灯片，然后再次显示幕布。

示例：http: //jsbin.com/iXiJUZi/1/edit

于 2013-09-19T14:42:11.047 回答