我重新设计了 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;
}
有什么想法吗?
(鼠标悬停时右侧控件也会稍微抽动,但这是另一个问题)。
最佳答案
你还应该设置: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 .
关于jquery - Bootstrap 轮播控件在单击后保持可见(应该获得不透明度 0),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38463084/