html - 按钮不适用于我的动画

Question

几天前我用 css3 制作了一个动画，它基本上是一个幻灯片。问题是，每当我尝试在幻灯片放映中插入按钮时，第一张幻灯片上的按钮不可点击，但第二张幻灯片上的按钮可点击。

HTML:

<div class="slide1">
        <div class="button_container1">
            <div class="button_bg"></div>
            <button class="button_skin">En savoir plus</button>
        </div>
    </div>
    <div class="slide2">
        <div class="button_container2">
            <div class="button_bg"></div>
            <button class="button_skin">En savoir plus</button>
        </div>
    </div>

CSS:

.slide1{
    background: url(images/slide_1.jpg) no-repeat;
    width: 1050px;
    height: 425px;
    -webkit-animation: slide1 21s infinite;
    animation: slide1 21s infinite;
    position: relative;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 0.75);
}
.button_container1{
  width: 87px;
  height: 23px;
  position: absolute;
  right: 22px;
  bottom: 69px;
}
@keyframes slide1 {
  0%   { opacity: 0;}
  2%  { opacity: 1; }
  33% { opacity: 1;}
  35% { opacity: 0;}
  100% {opacity: 0;}
}
.slide2{
    background: url(images/slide_2.jpg) no-repeat;
    width: 1050px;
    height: 425px;
    -webkit-animation: slide2 21s infinite;
    animation: slide2 21s infinite;
    position: relative;
    margin-top: -425px;
    -webkit-box-shadow: 0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    -moz-box-shadow:    0px 0px 7px 0px rgba(50, 50, 50, 0.75);
    box-shadow:         0px 0px 7px 0px rgba(50, 50, 50, 0.75);
}
.button_container2{
  width: 87px;
  height: 23px;
  position: absolute;
  left : 22px;
  bottom: 69px;
}
@keyframes slide2 {
  0%   { opacity: 0; }
  33%  { opacity: 0; }
  36% { opacity: 1;}
  66% { opacity: 1;}
  68% {opacity: 0;}
  100% {opacity: 0;}
}

谢谢。

Answer 1

您的第二张幻灯片将覆盖第一张幻灯片，因此当您点击时，您点击的是第二张幻灯片而不是第一张按钮。

您可以更改第一个按钮的 z-index 以将其置于最前面。

z-index: 1;

http://jsfiddle.net/jn4tch7k/1/