僅在懸停時顯示 Bootstrap Carousel 導航

Question

我使用的是 Bootstrap 的 Carousel，在這里找到。 這是一個很棒的腳本，不幸的是，我希望它能夠讓導航箭頭消失並且只出現在懸停時。 這可能嗎？我將如何實施？

感謝大家的幫助！

Answer 1

你只需要一點CSS

.carousel .carousel-control { visibility: hidden; }
.carousel:hover .carousel-control { visibility: visible; }

演示（jsfiddle）

Answer 2

它也很好擺脫那些討厭的漸變，添加這也是：

.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;
}

Answer 3

這是與 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;
    }
}