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。

单击后Bootstrap轮播控件保持可见（应该得到不透明度0）

1 个答案: