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

z-index: -1类上的.promos导致问题是完全正确的，因为它正在推动.white包含块后面的幻灯片放映并导致点击不注册

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

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

1 个答案: