ｃｓｓのみのスライドをつくってますが、リンクがうまく反応しません

いま、ｃｓｓのみしか使えないところでフェードのスライダーを作っているのですが、
リンクがうまく反応しません。
スペーサーの画像と、フェードで２枚の画像を入れ替えて表示させたいのですが、画像にはっているリンクがうまく反応しません。
１巡目の表示では、１枚目２枚目ともにリンクがきれいに飛ぶのですが、
２巡目からの表示では、２枚目の画像にはっているリンクにどちらも飛んでしまいます。
なぜだか半日考えてもわからず、質問させていただきました。

発生している問題・エラーメッセージ

リンクがきれいにとばない

該当のソースコード

HTMLのコード
1<div class="slide-show">
2  <a href="#">
3  <img src="img1" /></a><!-- 一番下のスペーサー画像 -->
4  <a href="#1">
5  <img src="img1" /></a>
6  <a href="#2">
7  <img src="img2" /></a>
8
9</div>
10
11
12　　CSSのコード
13　div.slide-show {
14    width: 1000px; /* スライドショーの幅 */
15    max-width: 100%; 
16    margin: 20px auto; /* 中央 */
17    position: relative;
18}
19 
20.slide-show a { 
21    animation: show 12s infinite; /* 12秒のスライドショー */
22    max-width: 100%;
23    opacity: 0;
24    position: absolute; /* 画像を重ねて表示 */
25    left: 0;
26    top: 0;
27    height: 0;
28    overflow: auto;
29}
30 
31@keyframes show {
32    0%  {opacity: 0; height: auto;}
33    17% {opacity: 1; height: auto;}
34    33% {opacity: 1; height: auto;}
35    50% {opacity: 0; height: auto;}
36}
37 
38.slide-show a:nth-of-type(1) {
39    position: relative;
40}
41 
42.slide-show a:nth-of-type(2) {
43    animation-delay: 0s;
44}
45 
46.slide-show a:nth-of-type(3) {
47    animation-delay: 6s;
48}
49
50

試したこと

heightを0に指定しないと、リンクがとばない。
だけどそうすると、２枚目のフェードがおかしくなる。

なので、@keyframesにもheightをautoで指定しました。

補足情報（FW/ツールのバージョンなど）

どなたかぜひご教授願います。

行動規範の内容に同意します

回答1件

ベストアンサー

.slide-show a:nth-of-type(3) がアニメーション開始時点（6秒）で
.slide-show a:nth-of-type(2) の上に重なって、そのままになっているのが原因と考えられます。

z-indexで要素の上下を上げ下げしてみてはいかがでしょうか？

CSS
1@keyframes show {
2    0%  {opacity: 0; height: auto; z-index: 0;}
3    17% {opacity: 1; height: auto; z-index: 2;}
4    33% {opacity: 1; height: auto; z-index: 2;}
5    50% {opacity: 0; height: auto; z-index: 0;}
6}