Question

我的旋转木马有完整的页面图像，当鼠标在页面的任何位置时，控制器都会出现。我希望它们仅在悬停在控制器所在的区域时出现。

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

.carousel-control.left, .carousel-control.right {
    background-image: none;
}

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

第三个标签是删除渐变，感谢任何帮助

Answer 1

你只需要改变一下CSS：

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

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

Answer 2

使用不透明度代替可见性，如下所示：

.carousel .carousel-control{
  opacity: 0;
}
.carousel .carousel-control:hover{
  opacity: 1;
}

这是一个向你展示工作Fiddle

的小提琴

CSS Bootstrap Carousel：将鼠标悬停在控制部分上时显示控件，而不是悬停在整个旋转木马上时

2 个答案: