纯CSS滑块W/图像更改悬停

Question

我为一个客户创建了网站http://StudyUp.com。在页面的顶部，我们制作了一个滑动条，它使用纯CSS在图像之间进行交换。今天，客户问我们是否可以在单选按钮悬停时改变图像，或者开始自动滑动。

据我所知，这是不可能没有jQuery，这是我们一直试图避免。不过，如果你有什么要补充的，我洗耳恭听，非常感激!我想在决定没用之前先问问我的蜂群思维。如果您知道一种快速的jQuery修复方法，我也愿意使用。

Slider的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; 
}

Answer 1

使用这个。这是Chris Coyer的解决方案。非常非常简单和轻量级。

http://css-tricks.com/snippets/jquery/simple-auto-playing-slideshow/

祝你好运!

Answer 2

你可以通过在你的su-home.css中修改:checked event为:hover来实现鼠标悬停的图像过渡，行号:202

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