我已经通过CSS和HTML创建了一个内容滑块。内容滑块工作正常，但我想要做的是将一个img包装在＆＃34; label-for＆＃34;标签。这甚至可能吗？有另一种解决方案吗？我只是希望能够点击img并转到特定的幻灯片。
另外，我知道它的布局很奇怪。它只是作为wordpress网站的一个简短代码内联编写。
<div class="wood-container">
<label for="slide-1-trigger">
<img src="http://104.236.119.181/Jake/wp-content/uploads/2016/06/Warm-Hearts-duo-tones-Hue-Img.png">
</label>
</div>
<div class="html">
<div class="body">
<div class="wrap">
<header>
<label for="slide-1-trigger">Select</label>
<label for="slide-2-trigger">Premium</label>
<label for="slide-3-trigger">Decor</label>
<label for="slide-4-trigger">Style</label>
<label for="slide-5-trigger">Tradition</label>
</header>
<input id="slide-1-trigger" type="radio" name="slides" checked>
<section class="slide slide-one">
<h1>Select</h1>
<h3 style="color: white;"> This selection of quality highlighted by the uniformity in color and shading . Still, it is showing details of character that demonstrate the natural and unique characteristics of the soil. The slats contain few knots of 12 mm maximum. They may contain small cracks and holes knots, always reintegrated toned putty.</h3>
</section>
<input id="slide-2-trigger" type="radio" name="slides">
<section class="slide slide-two">
<h1>Premium</h1>
<h3 style="color: white;"> Large woods always have a strong personality. The details of character are the nodes, veins and existing shades in the Premium selection are less pronounced. The knot density is low , reaching these a diameter up to 25mm . They may contain small cracks and holes knots, always reintegrated toned putty. It contains veins, longitudinal shadows and occasionally sapwood fragments that provide natural character and beauty to the wood.</h3>
</section>
<input id="slide-3-trigger" type="radio" name="slides">
<section class="slide slide-three">
<h1>Decor</h1>
<h3> This selection is characterized by a greater variability tone and the presence of nodes that can reach 25 mm in diameter. It contains veins and longitudinal accused shadows that bring natural character and beauty to wood , which especially stand out in the heat - treated presentations. </h3>
</section>
<input id="slide-4-trigger" type="radio" name="slides">
<section class="slide slide-four">
<h1>Style</h1>
<h3> Characterized by its hardiness, this selection offers shows accentuated woody patterns, with sinuous veining and abundance of knots that can reach 6 cm in diameter. Occasional tables show caulked natural cracks and strips of sapwood, which further accentuate the naturalness of the selection.</h3>
</section>
<input id="slide-5-trigger" type="radio" name="slides">
<section class="slide slide-five">
<h1>Tradition</h1>
<h3>Characterized by its hardiness, this selection offers shows accentuated woody patterns , with sinuous veining and abundance of knots that can reach 6 cm in diameter. Occasional tables show caulked natural cracks and strips of sapwood, which further accentuate the naturalness of the selection.</h3>
</section>
</div>
</div>
</div>
CSS：
<style> @import url(http://fonts.googleapis.com/css?family=lato);
html {
box-sizing: border-box;
font-family: Arial, sans-serif;
font-size: 16px;
font-weight: normal;
line-height: 1.4;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
h1 {
color: #fff;
font-family: "lato", cursive;
font-size: 2em;
font-size: 6vw;
line-height: 1.2;
text-shadow: 1px 1px 1px #333;
}
h3 {
color: white;
font-family: "lato";
font-size: 16px;
line-height: 1.2;
text-align: center;
margin: 20px;
}
@media (min-width: 67.1875em) {
h1 {
font-size: 4em;
}
}
.html,
body {
height: 100%;
width: auto;
margin: 20px;
padding: 20px;
}
.wood-container {
width: 250px;
height: auto;
float: left;
margin 20px;
}
.wood-container img {
max-width: 100%;
}
.wrap {
height: 430px;
width: 100%;
position: relative;
overflow: hidden;
background: #120103;
color: #fff;
text-align: center;
}
header {
background: #3E474F;
box-shadow: 0 .5em 1em #111;
position: relative;
top: 0;
left: 0;
z-index: 900;
width: 100%;
}
header label {
color: #788188;
cursor: pointer;
display: inline-block;
line-height: 4.25em;
font-size: .75em;
font-weight: bold;
padding: 0 1em;
}
header label:hover {
background: #2e353b;
}
.slide {
height: 430px;
width: 100%;
position: absolute;
top: 0;
left: 100%;
z-index: 10;
padding: 8em 1em 0;
background-color: #120103;
background-position: 50% 50%;
background-size: cover;
-webkit-transition: left 0s .75s;
transition: left 0s .75s;
}
.slide h1 {
opacity: 0;
-webkit-transform: translateY(100%);
transform: translateY(100%);
-webkit-transition: opacity .5s, -webkit-transform .5s .5s;
transition: opacity .5s, -webkit-transform .5s .5s;
transition: transform .5s .5s, opacity .5s;
transition: transform .5s .5s, opacity .5s, -webkit-transform .5s .5s;
}
[id^="slide"]:checked + .slide {
left: 0;
z-index: 100;
-webkit-transition: left .65s ease-out;
transition: left .65s ease-out;
}
[id^="slide"]:checked + .slide h1 {
opacity: 1;
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transition: all .5s .5s;
transition: all .5s .5s;
}
</style>
JSFiddle的链接。 https://jsfiddle.net/deathbydiabetes/939yu48q/2/