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

似乎是一個Z指數問題，也因爲你絕對定位你的形象，你的鏈接將沒有高度。

在下面，我已經將你的圖像包含在跨度中，並將其定位爲代替圖像（與錨點相同的類，以便定位），並將一些z-index添加到動畫中（代碼中的註釋） 。

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

嘗試添加下面的CSS屬性

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

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

Answer 3

該問題來自您的position: absolute。

它從正常流程中刪除所有圖像。所以<a/>標籤不「包含」圖像。

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

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%;} 
 
    }

\t \t <div class="zd-container" id="zd-collection2"> <div class="zd-slider"> 
 

 
\t \t \t <img id="blank" src="http://via.placeholder.com/1440x133" alt="" /> 
 
\t \t \t 
 
\t \t \t <img id="img_01" src="http://via.placeholder.com/1440x133" alt="" /> 
 
\t \t \t 
 
\t \t \t <a id="img_02_link" href="http://www.google.com" target="_blank"> 
 
\t \t \t \t <img id="img_02" src="http://via.placeholder.com/1440x133" alt="" /> 
 
\t \t \t </a> 
 
\t \t \t 
 
\t \t \t <img id="img_03" src="http://via.placeholder.com/1440x133" alt="" /> 
 

 
\t \t \t <div id="slide"></div> 
 
\t \t </div> 
 
\t </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>