添加到交叉淡化图像的链接css

Question

我目前有以下HTML：

<div class="crossfade_container">
  <div id="crossfade">
      **<a href="#">**<img src="osu_crossfade1.png" alt="Ohio State Cheerleaders waving OHIO flags" />**</a>**
      **<a href="#">**<a href="#"><img src="um_huddle1.png" alt="Michigan Players in team Huddle" />**</a>**
      **<a href="#">**<img src="osu_crossfade2.png" alt="Overlooking Independence Hall from Ohio Stadium" />**</a>**
      **<a href="#">**<img src="um_qb1.png" alt="Devin Gardner Scrambles out of the pocket" />**</a>**
      **<a href="#">**<img src="osu_crossfade3.png" alt="Ohio Stadium on Gameday" />**</a>**
  </div>
</div>

CSS：

.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** img { 
    width: 695px;
    height: 350px;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    opacity: 0;
    z-index: 0;

    -webkit-backface-visibility: hidden;
    -webkit-animation: imageAnimation 40s linear infinite 0s;
    -moz-animation: imageAnimation 40s linear infinite 0s;
    -o-animation: imageAnimation 40s linear infinite 0s;
    -ms-animation: imageAnimation 40s linear infinite 0s;
    animation: imageAnimation 40s linear infinite 0s; 
  }

  #crossfade > img:nth-child(2) {
    -webkit-animation-delay: 8s;
    -moz-animation-delay: 8s;
    -o-animation-delay: 8s;
    -ms-animation-delay: 8s;
    animation-delay: 8s; 
  }
  #crossfade > img:nth-child(3) {
    -webkit-animation-delay: 16s;
    -moz-animation-delay: 16s;
    -o-animation-delay: 16s;
    -ms-animation-delay: 16s;
    animation-delay: 16s; 
  }
  #crossfade > img:nth-child(4) {
    -webkit-animation-delay: 24s;
    -moz-animation-delay: 24s;
    -o-animation-delay: 24s;
    -ms-animation-delay: 24s;
    animation-delay: 24s; 
  }
  #crossfade > img:nth-child(5) {
    -webkit-animation-delay: 32s;
    -moz-animation-delay: 32s;
    -o-animation-delay: 32s;
    -ms-animation-delay: 32s;
    animation-delay: 32s; 
  }

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

我想添加环绕交叉淡化图像，以便它们能够成为链接而不仅仅是图像。但是，无论何时这样做，它都会破坏我所拥有的CSS。谢谢你的帮助！

Answer 1

需要删除或更新所有> CSS声明：>表示直接的儿童并且不再有效，因为img现在是a的孩子，而非直接#crossfade的后代。请参阅下面的更新代码块，其中a在img之前添加.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 img { width: 695px; height: 350px; position: absolute; top: 0px; left: 0px; color: transparent; opacity: 0; z-index: 0; -webkit-backface-visibility: hidden; -webkit-animation: imageAnimation 40s linear infinite 0s; -moz-animation: imageAnimation 40s linear infinite 0s; -o-animation: imageAnimation 40s linear infinite 0s; -ms-animation: imageAnimation 40s linear infinite 0s; animation: imageAnimation 40s linear infinite 0s; } #crossfade > a img:nth-child(2) { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } #crossfade > a img:nth-child(3) { -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } #crossfade > a img:nth-child(4) { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } #crossfade > a img:nth-child(5) { -webkit-animation-delay: 32s; -moz-animation-delay: 32s; -o-animation-delay: 32s; -ms-animation-delay: 32s; animation-delay: 32s; } @-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 } } ，其转换为＆＃34; #crossfade的后代，a＆＃34;的后代img。

img

如果您将所有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 40s linear infinite 0s; -moz-animation: imageAnimation 40s linear infinite 0s; -o-animation: imageAnimation 40s linear infinite 0s; -ms-animation: imageAnimation 40s linear infinite 0s; animation: imageAnimation 40s linear infinite 0s; } #crossfade > a:nth-child(2) { -webkit-animation-delay: 8s; -moz-animation-delay: 8s; -o-animation-delay: 8s; -ms-animation-delay: 8s; animation-delay: 8s; } #crossfade > a:nth-child(3) { -webkit-animation-delay: 16s; -moz-animation-delay: 16s; -o-animation-delay: 16s; -ms-animation-delay: 16s; animation-delay: 16s; } #crossfade > a:nth-child(4) { -webkit-animation-delay: 24s; -moz-animation-delay: 24s; -o-animation-delay: 24s; -ms-animation-delay: 24s; animation-delay: 24s; } #crossfade > a:nth-child(5) { -webkit-animation-delay: 32s; -moz-animation-delay: 32s; -o-animation-delay: 32s; -ms-animation-delay: 32s; animation-delay: 32s; } @-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 } } 容器元素会怎样？

<img src="" data-href="http://url.com/" ... />

如果你不反对一个小jQuery，你也可以删除所有锚标签并执行：

$(".crossfade_container img").on( "click", function(){
    window.open( $(this).data("href");
});

jQuery的：

.crossfade_container img {
    cursor: pointer;
}

CSS添加指针光标：

{{1}}

Answer 2

这是

.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 img {
  width: 695px;
  height: 350px;
  position: absolute;
  top: 0px;
  left: 0px;
  color: transparent;
  opacity: 0;
  z-index: 0;
  -webkit-backface-visibility: hidden;
  -webkit-animation: imageAnimation 40s linear infinite 0s;
  -moz-animation: imageAnimation 40s linear infinite 0s;
  -o-animation: imageAnimation 40s linear infinite 0s;
  -ms-animation: imageAnimation 40s linear infinite 0s;
  animation: imageAnimation 40s linear infinite 0s;
}
#crossfade img:nth-child(2) {
  -webkit-animation-delay: 8s;
  -moz-animation-delay: 8s;
  -o-animation-delay: 8s;
  -ms-animation-delay: 8s;
  animation-delay: 8s;
}
#crossfade img:nth-child(3) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  -ms-animation-delay: 16s;
  animation-delay: 16s;
}
#crossfade img:nth-child(4) {
  -webkit-animation-delay: 24s;
  -moz-animation-delay: 24s;
  -o-animation-delay: 24s;
  -ms-animation-delay: 24s;
  animation-delay: 24s;
}
#crossfade img:nth-child(5) {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  -ms-animation-delay: 32s;
  animation-delay: 32s;
}
@-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="#">
      <img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
    </a>
    <a href="#">
      <img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
    </a>
    <a href="#">
      <img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
    </a>
    <a href="#">
      <img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
    </a>
    <a href="#">
      <img src="http://placehold.it/350x150/292929/e3e3e3" alt="Ohio State Cheerleaders waving OHIO flags" />
    </a>

  </div>
</div>