[英]Make Bootstrap Carousel navigation show only on hover
你只需要一点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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.