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/

Answer 2

问题是div2高于div1，你可以减小div 2的大小然后你可以使用两个按钮，你可以使用指南，使用slide1中的border:1px blue solid;和{{1对于slide2

请检查example

按钮不适用于我的动画

2 个答案: