僅CSS橫幅廣告滑塊-圖片超鏈接不起作用

Question

 .zd-slider { position:relative; overflow:hidden; margin-top: 0px; } .zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} /* set the width/height of the slideshow */ .zd-slider img#blank {display:block; width:100%; visibility:hidden;} /* the slideshow */ .zd-slider #img_01 {-webkit-animation:autoplay 9s linear infinite 0s; animation:autoplay 9s linear infinite 0s;} .zd-slider #img_02 {-webkit-animation:autoplay 9s linear infinite 3s; animation:autoplay 9s linear infinite 3s;} .zd-slider #img_03 {-webkit-animation:autoplay 9s linear infinite 6s; animation:autoplay 9s linear infinite 6s; } @-webkit-keyframes autoplay { 4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} 0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} } @keyframes autoplay { 4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} 0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} } /* the slide timing indicator */ .zd-slider #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.5); -webkit-animation:slide 3s linear infinite; animation:slide linear 3s infinite;} @keyframes slide { 0% {left:-100px;} 100% {left:100%;} } @-webkit-keyframes slide { 0% {left:-100px;} 100% {left:100%;} } 

 <div class="zd-container" id="zd-collection2"> <div class="zd-slider"> <img id="blank" src="http://via.placeholder.com/1440x133" alt="" /> <img id="img_01" src="http://via.placeholder.com/1440x133" alt="" /> <a href="http://www.google.com"> <img id="img_02" src="http://via.placeholder.com/1440x133" alt="" /></a> <img id="img_03" src="http://via.placeholder.com/1440x133" alt="" /> <div id="slide"></div> </div> </div> 

我正在使用這種幻燈片格式在eBay商店列表上顯示橫幅。 我想讓幻燈片鏈接到商店中的各個頁面，但是我嘗試以傳統方式添加超鏈接（請參閱“ img_02”），並且絕對沒有使幻燈片可點擊的運氣。 我在這里看到過類似的問題，並嘗試了幾種不同的“有效”解決方案，但都沒有運氣。 如果有人可以建議如何解決這個問題，將不勝感激。

Answer 1

嘗試添加以下CSS屬性

.zd-slider a { display: inline-block; }

Becasue的a標簽沒有得到任何寬度或高度，可能無法正確地解釋你，試試這個，並將為確保正常工作。

Answer 2

問題出在您的position: absolute 。

它從正常流中刪除所有圖像。 因此， <a/>標簽不會“包含”圖像。

您可以嘗試使用靜態位置和transform: translate動畫而不是opacity因此不需要堆疊圖像。

Answer 3

似乎是z-index問題，並且還因為您完全定位了圖像，因此鏈接沒有高度。

在下面，我將您的圖像包裝成跨度，並定位了圖像而不是圖像（與錨具有相同的類，因此也可以定位），並在動畫中添加了一些z索引（代碼中的注釋）。

 .zd-slider { position: relative; overflow: hidden; margin-top: 0px; } .zd-slider .container { /* move this from image to new container span / link */ display: block; width: 100%; position: absolute; left: 0; top: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } .zd-slider img { display: block; width: 100%; } /* set the width/height of the slideshow */ .zd-slider #blank { visibility: hidden; pointer-events: none; /* I added this in case it appeared on top of the absolute positioned elements - it shouldn't but just to be safe */ } /* the slideshow */ .zd-slider #img_01 { -webkit-animation: autoplay 9s linear infinite 0s; animation: autoplay 9s linear infinite 0s; } .zd-slider #img_02 { -webkit-animation: autoplay 9s linear infinite 3s; animation: autoplay 9s linear infinite 3s; } .zd-slider #img_03 { -webkit-animation: autoplay 9s linear infinite 6s; animation: autoplay 9s linear infinite 6s; } @-webkit-keyframes autoplay { 4%, 33% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; z-index: 2; /* add this to make sure visible item has a higher z-index that none visible items */ } 0%, 37%, 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; z-index: 1; /* add this to make sure visible item has a higher z-index that none visible items */ } } @keyframes autoplay { 4%, 33% { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; z-index: 2; /* add this to make sure visible item has a higher z-index that none visible items */ } 0%, 37%, 100% { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; ] z-index: 1; /* add this to make sure visible item has a higher z-index that none visible items */ } } /* the slide timing indicator */ .zd-slider #slide { width: 98px; height: 5px; position: absolute; left: 0; bottom: 0; background: rgba(255, 255, 255, 0.5); -webkit-animation: slide 3s linear infinite; animation: slide linear 3s infinite; z-index: 3; /* make slider appear above images */ } @keyframes slide { 0% { left: -100px; } 100% { left: 100%; } } @-webkit-keyframes slide { 0% { left: -100px; } 100% { left: 100%; } } 

 <div class="zd-container" id="zd-collection2"> <div class="zd-slider"> <!-- sizing div doesn't need container class--> <span id="blank"><img src="http://via.placeholder.com/1440x133" alt="" /></span> <span class="container" id="img_01"><img src="http://via.placeholder.com/1440x133" alt="" /></span> <a href="http://www.google.com" class="container" id="img_02"><img src="http://via.placeholder.com/1440x135" alt="" /></a> <span class="container" id="img_03"><img src="http://via.placeholder.com/1440x133" alt="" /></span> <div id="slide"></div> </div> </div> 

Answer 4

這有效，需要將位置，寬度，高度和z-index都應用到鏈接：

  #img_02_link{ position: absolute; top:0; left:0; width: 100%; height: 100%; z-index:1; } .zd-slider { position:relative; overflow:hidden; margin-top: 0px; } .zd-slider img[id*="img"] {width:100%; position:absolute; left:0; top:0; opacity:0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} /* set the width/height of the slideshow */ .zd-slider img#blank {display:block; width:100%; visibility:hidden;} /* the slideshow */ .zd-slider #img_01 {-webkit-animation:autoplay 9s linear infinite 0s; animation:autoplay 9s linear infinite 0s;} .zd-slider #img_02 {-webkit-animation:autoplay 9s linear infinite 3s; animation:autoplay 9s linear infinite 3s;} .zd-slider #img_03 {-webkit-animation:autoplay 9s linear infinite 6s; animation:autoplay 9s linear infinite 6s; } @-webkit-keyframes autoplay { 4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} 0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} } @keyframes autoplay { 4%,33% {opacity:1;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";} 0%,37%,100% {opacity:0;-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";} } /* the slide timing indicator */ .zd-slider #slide {width:98px; height:5px; position:absolute; left:0; bottom:0; background:rgba(255,255,255,0.5); -webkit-animation:slide 3s linear infinite; animation:slide linear 3s infinite;} @keyframes slide { 0% {left:-100px;} 100% {left:100%;} } @-webkit-keyframes slide { 0% {left:-100px;} 100% {left:100%;} } 

  <div class="zd-container" id="zd-collection2"> <div class="zd-slider"> <img id="blank" src="http://via.placeholder.com/1440x133" alt="" /> <img id="img_01" src="http://via.placeholder.com/1440x133" alt="" /> <a id="img_02_link" href="http://www.google.com" target="_blank"> <img id="img_02" src="http://via.placeholder.com/1440x133" alt="" /> </a> <img id="img_03" src="http://via.placeholder.com/1440x133" alt="" /> <div id="slide"></div> </div> </div> 

Answer 5

為每個滑塊圖像創建一個單獨的div，並將Z-index賦予該普通類div ....

Answer 6

試試這個解決方案：

演示： https : //jsfiddle.net/yc07b60j/

 .zd-slider { position: relative; overflow: hidden; margin-top: 0px; } .zd-slider a { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .zd-slider img[id*="img"] { width: 100%; position: absolute; left: 0; top: 0; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } /* set the width/height of the slideshow */ .zd-slider img#blank { display: block; width: 100%; visibility: hidden; } /* the slideshow */ .zd-slider #img_01 { -webkit-animation: autoplay 9s linear infinite 0s; animation: autoplay 9s linear infinite 0s; } .zd-slider #img_02 { -webkit-animation: autoplay 9s linear infinite 3s; animation: autoplay 9s linear infinite 3s; } .zd-slider #img_03 { -webkit-animation: autoplay 9s linear infinite 6s; animation: autoplay 9s linear infinite 6s; } @-webkit-keyframes autoplay { 4%, 33% { z-index: 2; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 0%, 37%, 100% { z-index: 1; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } @keyframes autoplay { 4%, 33% { z-index: 2; opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; } 0%, 37%, 100% { z-index: 1; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; } } /* the slide timing indicator */ .zd-slider #slide { width: 98px; height: 5px; position: absolute; left: 0; bottom: 0; background: rgba(255, 255, 255, 0.5); -webkit-animation: slide 3s linear infinite; animation: slide linear 3s infinite; } @keyframes slide { 0% { left: -100px; } 100% { left: 100%; } } @-webkit-keyframes slide { 0% { left: -100px; } 100% { left: 100%; } } 

 <div class="zd-container" id="zd-collection2"> <div class="zd-slider"> <img id="blank" src="http://via.placeholder.com/1440x133/f44242/ffffff" alt="" /> <img id="img_01" src="http://via.placeholder.com/1440x133/86f441/ffffff" alt="" /> <a href="http://www.google.com"> <img id="img_02" src="http://via.placeholder.com/1440x133/f44242/ffffff" alt="" /> </a> <img id="img_03" src="http://via.placeholder.com/1440x133/41aff4/ffffff" alt="" /> </div> </div>