css - 图像 slider - 无法在不破坏定位的情况下建立图像链接

Question

我制作了一个图像 slider ，在我尝试将图像制作成链接之前效果很好。我尝试了几件事，但都遇到了不同的问题。

例如当我改变

<img src="img/radish.jpg" alt="radish">

到

<a href ="radish.html"><img src="img/radish.jpg" alt="radish"></a>

图像消失了，这可以通过更改来修复

.slider li input:checked ~ img{
    opacity: 1;
    visibility: visible;
    z-index: 10;
}   

到

.slider li input:checked ~ img a{
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

但是图像仍然不是可点击的链接，我已经找到了一种通过添加来解决此问题的方法

.slider li input:checked ~ a{
position: absolute;
}

但是在这样做之后我的标签从 slider 的底部移动到 slider 的上方，我只是不知道如何修复。

下面是尝试将图像更改为链接之前的 HTML 和 CSS。如果有人可以帮助我找到一种方法来制作图像链接而不改变任何元素的位置，我将永远欠你的债，谢谢 Bashtoe

HTML

<ul class="slider">
    <li>    
        <input type="radio" id="slide1" name="slide">
        <label for="slide1"></label>
        <img src="img/carrot.jpg" alt="carrot">
    </li>

    <li>
        <input type="radio" id="slide2" name="slide" checked>
        <label for="slide2"></label>
        <img src="img/turnip.jpg" alt="turnip">
    </li>

    <li>
        <input type="radio" id="slide3" name="slide">
        <label for="slide3"></label>
        <img src="img/radish.jpg" alt="radish">
    </li>

    <li>
        <input type="radio" id="slide4" name="slide">
        <label for="slide4"></label>
        <img src="img/parsnip.jpg" alt ="parsnip">
    </li>

    <li>
        <input type="radio" id="slide5" name="slide">
        <label for="slide5"></label>
        <img src="img/leek.jpg" alt="leek">
    </li>

    <li>
        <input type="radio" id="slide6" name="slide">
        <label for="slide6"></label>
        <img src="img/onion.jpg" alt="onion">
    </li>

</ul>

相关的 CSS

.slider{
height: 480px;
width: 1000px;
padding-bottom: 3.5em;
padding-top: 0.4em;
padding-left:6.2em;
margin:0 auto;
}

.slider li{
    list-style: none;
    position: absolute; 
    /*Creates a two bordered effect*/
    -webkit-box-shadow: 0px 0px 0px 3px #3C7F1E, 0px 0px 0px 6px #4C1F0A; 
    -moz-box-shadow:    0px 0px 0px 3px #3C7F1E, 0px 0px 0px 6px #4C1F0A;
    box-shadow:         0px 0px 0px 3px #3C7F1E, 0px 0px 0px 6px #4C1F0A;
}

.slider img{
    height: 480px;
    width: 800px;
    vertical-align: top;
}

.slider input{
    display:none;
}
.slider label{
    background-color:#3C7F1E;
    bottom: 8px;
    cursor: pointer;
    display: block;
    height: 16px;
    position: absolute;
    width: 16px;
    z-index: 10;
    border: 1px solid gray;
    box-shadow: inset 0px 0px 0px 2px white; /*Gives the button an outer ring */
    -webkit-box-shadow: inset 0px 0px 0px 2px white; /*cross browser compatibility */
   -moz-box-shadow: inset 0px 0px 0px 2px white;
   -o-box-shadow: inset 0px 0px 0px 2px white;
   /*makes the buttons circular */
   -webkit-border-radius: 8px;
   -moz-border-radius: 8px;
   -o-border-radius: 8px;
   border-radius: 8px;
}

.slider li input:checked ~ label{ /*Changes the color of the checked box */
    background: #4C1F0A;

}
/*Sets the distance from the left for the corrisponding button */
.slider li:nth-child(1) label{
    left: 16px;
}

.slider li:nth-child(2) label{
    left: 64px;
}

.slider li:nth-child(3) label{
    left: 112px;    
}
.slider li:nth-child(4) label{
    left: 160px;
}
.slider li:nth-child(5) label{
    left: 208px;
}
.slider li:nth-child(6) label{
    left: 256px;
}

/* Hides the images*/
.slider img{
    opacity: 0;
    visibility: hidden;
}

/*Displays the images when radio buttons are checked, note that the first starts as checked in the html*/
.slider li input:checked ~ img{
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

Answer 1

添加后:

.slider li input:checked ~ a{
position: absolute;
}

给 li 添加一些高度 ... 例如

.slider li{
list-style: none;
position: absolute; 
height: 480px;
/*Creates a two bordered effect*/
-webkit-box-shadow: 0px 0px 0px 3px #3C7F1E, 0px 0px 0px 6px #4C1F0A; 
-moz-box-shadow:    0px 0px 0px 3px #3C7F1E, 0px 0px 0px 6px #4C1F0A;
box-shadow:         0px 0px 0px 3px #3C7F1E, 0px 0px 0px 6px #4C1F0A;
}

这应该固定标签的位置