Question

我正在创建一个以jquery图像幻灯片作为背景的网站，并在幻灯片的顶部是一个导航栏，页面中间的空白区域，以便图像显示，并在底部下方幻灯片是一些内容和页脚。与Need Supply的当前网站（http://needsupply.com/）类似。

我的主要困难是，我希望幻灯片中的图像可以点击，但由于幻灯片显示在所有div（z-index：-1）的后面，因此它无法捕获任何点击，因为它被覆盖我的主要内容div（页面，页眉，页脚）。

我尝试用简单的链接图片替换幻灯片，但仍然无法点击，因此我知道它与幻灯片代码无关。

enter image description here

以下是我网站的基本结构：

<body>
  <div id="slideshow">
    <a href="www.example.com /><img src="pic1.jpg"></a>
    <a href="www.example.com /><img src="pic2.jpg"></a>
    ....
  </div>

  <div id="page">
    <div id="header">My Header</div>
    <div id="content">Some Content</div>
    <div id="footer">My Footer</div>
  </div>

</body>

的CSS：

#slideshow{
    width:100%;
    height: 620px;
    position: absolute;
    top:0;
    left:0;
    z-index:0;
}

#page{
    width: 980px;
    margin: 0 auto 2px auto;
}

非常感谢任何帮助。如果您需要更多信息，请告诉我。

Answer 1

您只需删除#page封包，并将#content和#footer置于底部。这样就不会有div覆盖图像的主要区域（#slideshow），因此您可以点击它。 #page，#content和#footer div仍然无法点击。

帮助制作可点击的背景幻灯片

1 个答案: