纯CSS滑块，悬停时带有图像更改

我有一个客户，我为他创建了网站。在页面顶部，我们制作了一个使用纯CSS在图像之间交换的滑块。今天，客户问我们是否可以在单选按钮悬停时更改图像，或者开始自动滑动

据我所知，如果没有jQuery，这是不可能的，我们一直在努力避免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>

---

用这个。这是克里斯·科耶的解决方案。非常简单和轻便

---

祝你好运

在su-home.css的第202行中，通过将：checked事件更改为：hover，可以实现鼠标悬停图像转换

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

---

我知道这对你的问题没有帮助，但是你真的应该考虑把你的代码>转换< /Cord>元素放到一个类中，而不是重新键入代码三次。没有JavaScript就可以了。要在悬停时进行更改，您只需要使用

：hover

伪类，要自动更改，您可以使用关键帧动画。同意：）这是一个较旧的项目，其中包含一些松散的代码。活到老学到老！正确的。。。但关键帧动画使过程更加复杂。我相信你不应该回避jQuery，因为几乎99%的互联网设备都支持JavaScript。你是对的！我们已经尝试过使用：hover psuedo类，但遇到了一些问题。关键帧会起作用，但不管怎样，我认为下面的@Santz解决方案是可行的。谢谢你！非常感谢。非常有帮助，对演出会很有帮助。再次感谢你的链接！为了更新，本教程完全做到了这一点！情况已经解决了，我再高兴不过了。再次感谢桑茨和其他人！你说得对！但是，问题是，悬停图像在之后不会保持在原来的位置。

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