javascript - 为什么这个旋转横幅的导航按钮不起作用？

Question

我有 3 张图片在主页上旋转。一次显示一张图片，图片下方有3个点表示是第一张、第二张还是第三张。

这些点应该是可点击的，但它们不是。

这是CSS:

.body, html {font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;font-weight:300;background:#fff; background: url('http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/headerImage4.png');background-repeat:repeat-x;width:100%;  margin:0; padding:0; }

.container{
    margin:0;
    padding:0;
    width:100%;
    height:100%;

    background-color:#ffffff;
}

.header {max-height: 100px}

.logo img {width:90%; min-height: 65px; max-width:400px; margin:0.5% 2% 1% 7%; float:left;}

.recLogo img {max-height: 140px; margin:0.5% 2% 1% 7%; float:left;}


.headlineContainer {display:block; width:80%; margin:0; position:relative; right:25%; font-weight:bold;}
.headline {margin:0;}

.nav {width:55%; margin:3.2% 0 0 0; float:left; max-height:100px}

.nav ul {}

.nav li {display:inline; height:30px; float:left; list-style:none; margin: 0 4.43668% 0 0;font-weight:bold}

.menu li a {text-decoration:none; color:#000; font-family:helvetica, arial, sans-serif; font-weight:regular;}

.menu li a:hover {color:#FFF}

.menu {float:right; margin:0 5% 0 0}

.current_page_item a:visited {color:#fff;}

.white {background-color:#fff;  background:url('http://www.ayrturfandtrac.org/wp-content/uploads/2012/12/headerImage4.png'); background-repeat:no-repeat; width:100%}

.promos {clear:both; width:80%; display:block; padding:5% auto 0 auto; margin: 0 auto; background-color:#fff; position:relative;bottom:2em; z-index:-1}

.rslides_tabs a {
background:#fff !important;
border: 2px solid !important;
border-color:#cccccc !important;
z-index:9 !important;
}

.rslides_tabs .rslides_here a {
background: #EE7600 !important;
border: 2px solid !important;
border-color:#cccccc !important;
z-index:9 !important;
}

页面可见http://www.ayrturfandtrac.org/

您对如何修复这三个按钮有什么想法吗？

Answer 1

.promos 类上的 z-index: -1 是导致问题的原因，您完全正确，因为它将幻灯片放映推到 .white 包含 block 并导致点击不注册。

您需要重新配置 html 和 css 的设置方式，以便“标题”区域真正成为它自己的元素，其中包含您的红色背景和投影以及 Logo 和导航，然后可以使用高于幻灯片放映容器的 z-index。这会使幻灯片放映保持在正常的 z-index，并且只要您没有让标题与幻灯片放映的重叠超过投影的大小，您的点击功能就应该可以正常工作。