0

我有 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/上看到

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

4

1 回答 1

1

您完全正确地认为z-index: -1类.promos导致了问题，因为它正在将幻灯片放映推到.white包含块后面并导致点击不注册。

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

于 2012-12-12T20:46:07.347 回答