Question

我目前有5个交叉淡化图像，悬停div显示在图像上方。我已经为下面的每个图片添加了一个链接参考，并将css设置为＆＃34; a＆＃34;组件，以便图像正确地进出。

＆＃13;

      .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
        }
      }

＆＃13;

<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>

＆＃13;

我无法弄清楚为什么每次点击图片或＆＃34;标题＆＃34; div，我被引导到fox.com ??

Answer 1

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

Answer 2

使用z-index来组织层次结构。

交叉淡化的图像链接无效

2 个答案: