关于css：图像滑块 – 无法在不破坏定位的情况下制作图像链接

Image slider - Unable to make images links without ruining positioning

我制作了一个图像滑块，在我尝试将图像变成链接之前，它可以正常工作。我试过几件事，但都遇到了不同的问题。

例如，当我改变

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

到

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

图像不适应这一变化

1
2
3
4
5

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

到

1
2
3
4
5

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

但是，图像仍然不是一个可点击的链接，我找到了一种方法，通过添加

1
2
3

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

但是这样做之后，我的标签从滑块的底部到滑块的上方，我不知道如何修复。

下面是尝试将图像更改为链接之前的HTML和CSS。如果有人能帮助我找到一种方法，使图像链接而不更改任何元素的位置，我将永远在您的债务中感谢Bashtoe

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

相关CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

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