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

您可以通过将：checked event更改为：hover in su-home.css，line no：202

来实现鼠标悬停图像转换

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

悬停时纯CSS滑块WITH /图像更改

2 个答案: