添加指向crossfaded图像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 } 
    } 

我想补充到环绕crossfaded图像，使它们能够被链接，而不仅仅是图像。但是，每当这样做时，它就会破坏我已有的CSS。谢谢您的帮助！

Answer 1

需要删除或更新所有> CSS声明：>表示直接孩子不再起作用，因为img现在的a一个孩子，而不是#crossfade直系后裔。请参阅下面更新的代码块，其中在img之前添加a，其转换为“直接后代#crossfade a，后代img of”。

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

如果你更新所有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 } 
    } 

如果你不反对小jQuery的，你也可以消除所有的锚标签，并做到：

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

的jQuery：

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

CSS添加指针光标：

.crossfade_container img { 
    cursor: pointer; 
} 

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>