我使用的是 Bootstrap 的 Carousel,在这里找到。这是一个很棒的脚本,不幸的是,我希望它能够让导航箭头消失并且只出现在悬停时。这可能吗?我将如何实施?
感谢大家的帮助!
我使用的是 Bootstrap 的 Carousel,在这里找到。这是一个很棒的脚本,不幸的是,我希望它能够让导航箭头消失并且只出现在悬停时。这可能吗?我将如何实施?
感谢大家的帮助!
你只需要一点 CSS
.carousel .carousel-control { visibility: hidden; }
.carousel:hover .carousel-control { visibility: visible; }
摆脱那些讨厌的渐变也很好,添加它也可以:
.carousel-control.left, .carousel-control.right {
background: none !important;
filter: progid: none !important;
outline: 0;
}
.carousel .carousel-control {
visibility: hidden;
}
.carousel:hover .carousel-control {
visibility: visible;
}
这是与 Bootstrap 5 一起使用的@Sherbrow 回答的后续内容。它还包括淡入和箭头动画。
.carousel .carousel-control-prev,
.carousel .carousel-control-next
{
visibility: hidden;
opacity: 1;
}
.carousel:hover .carousel-control-prev,
.carousel:hover .carousel-control-next
{
visibility: visible;
animation-duration: 1s;
transition-timing-function: linear;
}
.carousel:hover .carousel-control-prev
{
animation-name: FadeInPrev;
}
.carousel:hover .carousel-control-next
{
animation-name: FadeInNext;
}
@keyframes FadeInPrev
{
0%
{
opacity: 0;
padding-left: 40px;
}
100%
{
opacity: 1;
padding-left: 0px;
}
}
@keyframes FadeInNext
{
0%
{
opacity: 0;
padding-right: 40px;
}
100%
{
opacity: 1;
padding-right: 0px;
}
}