製作背景幻燈片圖片單獨可點擊

Question

我正在嘗試爲我的攝影作品組合製作背景圖片幻燈片。 當每個圖像淡入時，我希望它鏈接到其各自的畫廊。 我也有一個文本框，淡入圖像。我也想鏈接到相應的畫廊。我還沒有添加代碼，因爲我不知道如何破壞所有鏈接到代碼的代碼。 目前，無論我在哪裏放置鏈接，它們都會重疊，並且底部（link3）只能點擊。

我的HTML：

<ul class="cb-slideshow"> 
<li> 
    <span><a id="gallerylink" href="link1"></a></span> 
    <div> 
     <h3>Fire &amp; Light</h3> 
    </div> 
</li> 
<li> 
<span><a id="gallerylink" href="link2"></a></span> 
    <div> 
     <h3>Live Music</h3> 
    </div> 
</li> 
<li> 
<span><a id="gallerylink" href="link3"></a></span> 
    <div> 
     <h3>Water &amp; Nature</h3> 
    </div> 
</li> 
</ul> 

我的CSS：

#gallerylink { 
position: absolute; 
display: block; 
width: 100%; 
height: 100%; 
background-color: transparent; 
z-index: 999; 
} 
.cb-slideshow, 
.cb-slideshow:after { 
position: fixed; 
width: 100%; 
height: 100%; 
top: 0px; 
left: 0px; 
z-index: 0; 
list-style-type: none; 
} 
.cb-slideshow li span { 
width: 100%; 
height: 100%; 
position: absolute; 
top: 0px; 
left: 0px; 
color: transparent; 
background-size: cover; 
background-position: 50% 50%; 
background-repeat: none; 
opacity: 0; 
z-index: 0; 
animation: imageAnimation 18s linear infinite 0s; 
} 
.cb-slideshow li div { 
z-index: 1000; 
position: absolute; 
bottom: 5%; 
right:5%; 
width: 10%; 
text-align: center; 
opacity: 0; 
color: #fff; 
animation: titleAnimation 18s linear infinite 0s; 
} 
.cb-slideshow li div h3 { 
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; 
font-size: 25px; 
font-weight: 400; 
letter-spacing: 2px; 
padding: 0; 
background-color: white; 
line-height: 45px; 
} 
.cb-slideshow li:nth-child(1) span { 
background-image: url(iamge1) 
} 
.cb-slideshow li:nth-child(2) span { 
background-image: url(image2); 
animation-delay: 6s; 
} 
.cb-slideshow li:nth-child(3) span { 
background-image: url(image3); 
animation-delay: 12s; 
} 
.cb-slideshow li:nth-child(2) div { 
animation-delay: 6s; 
} 
.cb-slideshow li:nth-child(3) div { 
animation-delay: 12s; 
} 
@keyframes imageAnimation { 
0% { opacity: 0; animation-timing-function: ease-in; } 
5% { opacity: 1; animation-timing-function: ease-out; } 
30% { opacity: 1 } 
35% { opacity: 0 } 
100% { opacity: 0 } 
} 
@keyframes titleAnimation { 
0% { opacity: 0 } 
5% { opacity: 1 } 
30% { opacity: 1 } 
33% { opacity: 0 } 
100% { opacity: 0 } 
} 
@media screen and (max-width: 1140px) { 
.cb-slideshow li div h3 { font-size: 20px } 
} 
@media screen and (max-width: 600px) { 
.cb-slideshow li div h3 { font-size: 14px } 
} 

僅供參考我不接受信用爲大多數代碼;它來自：http://tympanus.net/codrops/2012/01/02/fullscreen-background-image-slideshow-with-css3/

我意識到背景圖像和href的不是真正的鏈接。我刪除了它們，所以它可以讓我以低聲譽發佈這個問題。 這裏是有問題的頁面，如果有幫助：http://kalemhornphoto.format.com/ 這個特殊的網站運行格式，它負責我的網站主題（和代碼）託管和後端，雖然我的CSS和HTML覆蓋他們。 在此先感謝！

Answer 1

jQuery是一種方式：

// Go trough every li with #gallerylink inside 
$("li #gallerylink").each(function() 
{ 
    // Bind click event to it 
    $(this).parent().on("click", function() 
    { 
     // Click the link if the li is clicked 
     $(this).find("#gallerylink")[0].click(); 
    }); 
});