純CSS滑塊W /圖像更改懸停

Question

我有一個客戶端，我創建了該網站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; 
} 

Answer 1

使用此。這是Chris Coyer的解決方案。非常非常簡單和輕量級。

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

祝你好運！檢查事件：

Answer 2

您可以通過更改實現鼠標懸停圖像過渡懸停在SU-home.css，沒有線：202

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