CSS Slider - 懸停功能而非點擊

Question

我有一個css滑塊（附加代碼）。 單擊按鈕時工作正常，但是，我希望在按鈕懸停時讓每個橫幅都滑動。

我試圖結合：hover和：target事件，但沒有任何運氣。

如果有人知道在懸停上獲得滑動功能的方法，那就太棒了。

謝謝你的幫助。 如果可能的話，我想用CSS實現這一點。

 body { margin: 0; padding: 0; } .slider-holder { width: 600px; height: 280px; background-color: yellow; text-align: center; overflow: hidden; } .image-holder { width: 3000px; background-color: red; height: 280px; clear: both; position: relative; -webkit-transition: left 2s; -moz-transition: left 2s; -o-transition: left 2s; transition: left 2s; } .slider-image { float: left; margin: 0px; padding: 0px; position: relative; } #slider-image-0:target~.image-holder { left: 0px; } #slider-image-1:target~.image-holder { left: -600px; } #slider-image-2:target~.image-holder { left: -1200px; } #slider-image-3:target~.image-holder { left: -1800px; } #slider-image-4:target~.image-holder { left: -2400px; } .button-holder>a>img { padding-left: 35px; padding-right: 35px; } 

 <div class="slider-holder"> <span id="slider-image-0"></span> <span id="slider-image-1"></span> <span id="slider-image-2"></span> <span id="slider-image-3"></span> <span id="slider-image-4"></span> <div class="image-holder"> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> </div> </div> <div class="button-holder"> <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> </div> 

Answer 1

你可以嘗試使用一些過渡黑客，但你必須改變html結構才能使用兄弟選擇器。

這是一個想法，我使用flexbox以便在視覺上保持相同的結構：

 body { margin: 0; padding: 0; } .container { display:flex; width:600px; flex-wrap:wrap; justify-content:space-between; } .slider-holder { order:-1; width: 600px; height: 280px; background-color: yellow; text-align: center; overflow: hidden; } .image-holder { width: 3000px; background-color: red; height: 280px; clear: both; position: relative; transition: left 7000s; /*Use a big value to block the image change*/ left: 0; } .slider-image { float: left; margin: 0px; padding: 0px; position: relative; } a[href="#slider-image-0"]:hover~.slider-holder .image-holder { left: 0.5px; /*Yes it's not 0px here, we need something different from the initial state to be able to trigger the transition (Yes I know it's not intuitive ..)*/ transition: left 1s; } a[href="#slider-image-1"]:hover~.slider-holder .image-holder { left: -600px; transition: left 1s; } a[href="#slider-image-2"]:hover~.slider-holder .image-holder { left: -1200px; transition: left 1s; } a[href="#slider-image-3"]:hover~.slider-holder .image-holder { left: -1800px; transition: left 1s; } a[href="#slider-image-4"]:hover~.slider-holder .image-holder { left: -2400px; transition: left 1s; } .button-holder>a>img { padding-left: 35px; padding-right: 35px; } 

 <div class="container"> <a href="#slider-image-0"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-1"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-2"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-3"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <a href="#slider-image-4"><img src="https://via.placeholder.com/70x70" alt="" width="70" style="border-width:0 !important;outline-style:none !important;"></a> <div class="slider-holder"> <div class="image-holder"> <img src="https://via.placeholder.com/600x280/ff0000" class="slider-image" /> <img src="https://via.placeholder.com/600x280/00ff00" class="slider-image" /> <img src="https://via.placeholder.com/600x280/f0f0f0" class="slider-image" /> <img src="https://via.placeholder.com/600x280/0000ff" class="slider-image" /> <img src="https://via.placeholder.com/600x280" class="slider-image" /> </div> </div> </div>