jquery - Bootstrap 轮播控件在单击后保持可见(应该获得不透明度 0)

Question

我重新设计了 Bootstrap 轮播控件，以便在轮播本身未悬停时隐藏。问题是，如果您单击其中一个(转到另一张幻灯片)并将鼠标移到 .carousel 容器之外，则单击的控件由于某种原因仍然可见。请在下面找到一个实际示例(只需将鼠标悬停在旋转木马上，单击其中一个控件，然后将鼠标移至代码部分以了解我的意思):

http://codepen.io/Deka87/pen/bZLQRm

轮播控制代码:

.carousel-control {
    display: block;
    top: 50%; bottom: auto;
    width: 55px; height: 55px;
    line-height: 55px;
    text-align: center;
    background-color: fade(black,50%);
    background-image: none !important;
    opacity: 0;
    transition: all .15s;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);

    > .glyphicon {
        position: static;
        width: auto; height: auto;
        margin: 0;
        font-size: @font-size-base;
    }
    &:hover {
        background-color: @brand-accent;
    }
}
.carousel:hover .carousel-control {
    opacity: 1;
}

有什么想法吗？

(鼠标悬停时右侧控件也会稍微抽动，但这是另一个问题)。

Answer 1

你还应该设置:focus伪类opacity: 0，因为那里的默认值是opacity: .9;

这是变化:

.carousel-control {
    display: block;
    top: 50%; bottom: auto;
    width: 55px; height: 55px;
    line-height: 55px;
    text-align: center;
    background-color: fade(black,50%);
    background-image: none !important;
    opacity: 0;
    transition: all .15s;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);

    > .glyphicon {
        position: static;
        width: auto; height: auto;
        margin: 0;
        font-size: 13px;
    }
    &:hover {
        background-color: green;
    }
    &:focus {
        opacity: 0;
    }
}

这是 codepen demo .