我有一个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>
答案 0 :(得分:3)
您可以尝试使用一些过渡技巧,但必须更改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>