无法获取在 CSS 轮播中使用的图像链接

Question

我无法使某些图像链接在 CSS 轮播中工作。我认为大多数图像都阻止了图像链接，因为当我将图像链接移离底层图像的区域时，链接实际上会起作用。我在 CSS 代码中尝试了 z-index 但这不起作用。

我这里有一个codePen：https://codepen.io/emilysarah1/pen/GREoEzo

HTML 在这里：

`<div class="carousel colorDissolve">
 
 <div class="item">

<span class="span1aa"><a href="https://joyfullinspirations.com/premium-starter-kit"> <img src="https://joyfullinspirations.files.wordpress.com/2024/01/starterkitoption-1_03-2.jpg" />
</a>

</span>
    <img src="https://joyfullinspirations.files.wordpress.com/2023/12/bigphoto-1.jpg"  />


            </div>


     
 <div class="item">


            <span class="span1a"><a href="https://joyfullinspirations.com/classes-3/"> <img src="https://joyfullinspirations.files.wordpress.com/2024/01/coachservices_03.jpg" />
</a>

</span>


    <img src="https://joyfullinspirations.files.wordpress.com/2023/11/pexels-mohammad-danish-891059-1.jpg" />

            </div>

我尝试使所有图像链接都有效，但遇到了问题。

Answer 1

你有分层问题。您的图像“pexels-mohammad-danish-891059-1.jpg”与其他图像重叠，因此无法单击下面的图像。

简单地使图像透明并不能解决问题，因为即使图像不可见也会保持在相同的位置。

我建议添加 JavaScript 以在转换期间动态添加/删除元素。或者，您可以在每个图像上放置一个元素并在动画期间更新其链接。

（如果我的解释不清楚或没有帮助，我深表歉意。）