仅在悬停时制作Bootstrap Carousel导航

Question

我使用的是Bootstrap的Carousel，找到here。不幸的是，这是一个很棒的剧本，我希望它可以让导航箭头消失，只出现在悬停状态。这有可能吗？我将如何实施呢？

感谢您的帮助！

Answer 1

你只需要一点CSS

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

Demo (jsfiddle)

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