我有一个客户，我为他创建了网站http://StudyUp.com。在页面顶部，我们制作了一个使用纯 CSS 在图像之间交换的滑块。今天，客户问我们是否可以在单选按钮悬停时更改图像，或者开始自动滑过。
据我所知，如果没有 jQuery，这是不可能的，我们一直在努力避免这种情况。但是，如果您有什么要补充的，我全神贯注，非常感激！我想在决定它是徒劳之前先问问蜂巢的心智。如果你知道一个快速的 jQuery 修复程序，我也愿意接受。
滑块的 HTML 是：
<div id="slider">
<ul class="slider">
<li>
<input type="radio" id="slide1" name="slide" checked>
<a href="#"><label for="slide1"></label></a>
<img src="/images/Slide1.png" />
</li>
<li>
<input type="radio" id="slide2" name="slide">
<a href="#"><label for="slide2"></label></a>
<img src="/images/Slide2.png" />
</li>
<li>
<input type="radio" id="slide3" name="slide">
<a href="#"><label for="slide3"></label></a>
<img src="/images/Slide3.png" />
</li>
<li>
<input type="radio" id="slide4" name="slide">
<a href="#"><label for="slide4"></label></a>
<img src="/images/Slide4.png" id="slide4img" />
</li>
</ul>
</div>
这是sonoffagun的CSS：
/*This here's the CSS for that there slider*/
#slider {
bottom:2%;
left: -4%;
margin: 0 auto;
position: relative;
top:65px;
z-index: 15;
}
.slider. {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
height:580;
width: 1020px;
}
.slider li {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
list-style: none;
position:absolute;
}
.slider img {
-webkit-transition: 0.15s ease-in-out;
-moz-transition: 0.15s ease-in-out;
-o-transition: 0.15s ease-in-out;
transition: 0.15s ease-in-out;
margin: 0 auto;
height:580;
width:1020px;
vertical-align: top;
}
.slider input {
display: none;
}
.slider label {
background-color:#69d2e7;
bottom: 8px;
cursor: pointer;
display: block;
height: 20px;
position:absolute;
width: 20px;
border-radius: 10px;
z-index: 10;
-webkit-transition: background-color 0.15s ease-in-out;
-moz-transition: background-color 0.15s ease-in-out;
-o-transition: background-color 0.15s ease-in-out;
transition: background-color 0.15s ease-in-out;
}
.slider li a:hover label {
background-color: #297cab;
}
.slider li a:hover label:after {
background-color: #297cab;
}
.slider li:nth-child(1) label {
margin-bottom: 1.1%;
left: 40%;
}
.slider li:nth-child(2) label {
margin-bottom: 1%;
left: 45%;
}
.slider li:nth-child(3) label {
margin-bottom: 1%;
left: 50%;
}
.slider li:nth-child(4) label {
margin-bottom: 1%;
left: 55%;
}
.slider img {
opacity: 0;
visibility: hidden;
}
.slider li input:checked ~ img {
opacity: 1;
visibility: visible;
z-index: 10;
}