仅在悬停时显示 Bootstrap Carousel 导航答案

【问题标题】：Make Bootstrap Carousel navigation show only on hover仅在悬停时显示 Bootstrap Carousel 导航
【发布时间】：2012-08-12 04:07:40
【问题描述】：

我使用的是 Bootstrap 的 Carousel，发现 here。这是一个很棒的脚本，不幸的是，我希望它能够让导航箭头消失并且只出现在悬停时。这可能吗？我将如何实施？

感谢大家的帮助！

【问题讨论】：

标签： javascript jquery twitter-bootstrap

【解决方案1】：

你只需要一点 CSS

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

Demo (jsfiddle)

【讨论】：

哇。很酷的答案。我在想它必须用 JQuery 来完成，但显然不是！
对于 Bootstrap 4：.carousel .carousel-control-prev, .carousel .carousel-control-next

【解决方案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;
}

【讨论】：

这不是问题的答案
我发现这些信息很有用，虽然它不是对问题的回答

【解决方案3】：

这是@Sherbrow 的回答的后续内容，适用于 Bootstrap 5。它还包括淡入和箭头动画。

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

【讨论】：