html - 交叉淡入淡出的图像链接不起作用

Question

我目前有 5 个交叉淡入淡出图像，悬停 div 显示在图像上方。我已经添加了对下面每张图片的链接引用，并将 css 设置为“a”组件，以便图片能够正确地平移和平移。

      .crossfade_container {
        display: inline-block;
        float: right;
        position: relative;
        background-color: #f0f0f0;
        width: 695px;
        height: 350px;
        margin-top: 10px;
        box-shadow: 2px 2px 2px silver;
      }
      #crossfade a {
        width: 695px;
        height: 350px;
        position: absolute;
        top: 0px;
        left: 0px;
        color: transparent;
        opacity: 0;
        z-index: 0;
        -webkit-backface-visibility: hidden;
        -webkit-animation: imageAnimation 60s linear infinite 0s;
        -moz-animation: imageAnimation 60s linear infinite 0s;
        -o-animation: imageAnimation 60s linear infinite 0s;
        -ms-animation: imageAnimation 60s linear infinite 0s;
        animation: imageAnimation 60s linear infinite 0s;
      }
      #crossfade .caption {
        font-size: 30px;
        opacity: 0;
        position: absolute;
        height: 75px;
        width: 665px;
        bottom: 0px;
        left: 0px;
        color: white;
        background: #00274c;
        text-align: left;
        padding-top: 10px;
        padding-left: 30px;
        border-bottom: 1px solid #00274c;
        font-weight: bold;
        line-height: 25px;
        -o-transition: .7s;
        -ms-transition: .7s;
        -moz-transition: .7s;
        -webkit-transition: .7s;
        transition: .7s;
      }
      #crossfade .caption span3 {
        font-size: 13px;
      }
      #crossfade:hover .caption {
        cursor: pointer;
        opacity: 1.0;
      }
      #crossfade:hover img {
        cursor: pointer;
      }
      #crossfade a:nth-child(2) {
        -webkit-animation-delay: 12s;
        -moz-animation-delay: 12s;
        -o-animation-delay: 12s;
        -ms-animation-delay: 12s;
        animation-delay: 12s;
      }
      #crossfade a:nth-child(3) {
        -webkit-animation-delay: 24s;
        -moz-animation-delay: 24s;
        -o-animation-delay: 24s;
        -ms-animation-delay: 24s;
        animation-delay: 24s;
      }
      #crossfade a:nth-child(4) {
        -webkit-animation-delay: 36s;
        -moz-animation-delay: 36s;
        -o-animation-delay: 36s;
        -ms-animation-delay: 36s;
        animation-delay: 36s;
      }
      #crossfade a:nth-child(5) {
        -webkit-animation-delay: 48s;
        -moz-animation-delay: 48s;
        -o-animation-delay: 48s;
        -ms-animation-delay: 48s;
        animation-delay: 48s;
      }
      @-webkit-keyframes imageAnimation {
        5% {
          opacity: 0;
          -webkit-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -webkit-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @-moz-keyframes imageAnimation {
        0% {
          opacity: 0;
          -moz-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -moz-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @-o-keyframes imageAnimation {
        0% {
          opacity: 0;
          -o-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -o-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @-ms-keyframes imageAnimation {
        0% {
          opacity: 0;
          -ms-animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          -ms-animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }
      @keyframes imageAnimation {
        0% {
          opacity: 0;
          animation-timing-function: ease-in;
        }
        8% {
          opacity: 1;
          animation-timing-function: ease-out;
        }
        17% {
          opacity: 1
        }
        25% {
          opacity: 0
        }
        100% {
          opacity: 0
        }
      }

<div class="crossfade_container">
  <div id="crossfade">
    <a href="http://espn.com">
      <img src="the-schott.png" alt="" />
      <div class="caption">PREVIEW:
        <br />
        <span3>preview addition info</span3>
      </div>
    </a>

    <a href="http://yahoo.com">
      <img src="stump.png" alt="" />
      <div class="caption">TITLE TWO
        <br />
        <span3>subtitle two</span3>
      </div>
    </a>

    <a href="http://gmail.com">
      <img src="um_huddle1.png" alt="" />
      <div class="caption">TITLE ONE
        <br />
        <span3>subtitle one</span3>
      </div>
    </a>

    <a href="http://hotmail.com">
      <img src="osu_crossfade2.png" alt="" />
      <div class="caption">Caption Goes Here</div>
    </a>

    <a href="http://fox.com">
      <img src="um_qb1.png" alt="" />
      <div class="caption">Caption Goes Here</div>
    </a>

  </div>
</div>

我不明白为什么每次单击图像或“标题”div 时，我都会被定向到 fox.com？？

Answer 1

当您将不透明度设置为 0 时，所有元素仍然存在(它们不可见但仍可通过单击访问)。这就是为什么你的最后一个元素 <a href="http://fox.com">实际上仍然在所有其他元素的前面，并且是在单击时触发的元素。尝试在动画中添加 display:none/block 或使用 z-index 在所有 <a> 之间组织层次结构组件。