如何移除Bootstrap 5轮播箭头的白色悬浮背景

我正在使用Bootstrap 5制作视频轮播，目前遇到一个问题：鼠标悬停轮播箭头时会出现白色背景，正常情况下该箭头不应带有背景，现寻求解决方法。

点击放大

代码片段 #

CSS #

.heading2 {
  font-size: 30px;
  text-align: center;
  font-family: 'Poppins', sans-serif;
}

.carousel-inner {
  width: 100%;
  height: auto;
}

HTML #

<div class="heading2">
  <h3>Film/Video Editing Projects</h3>
  <!-- Carousel wrapper -->
  <div id="carouselVideoExample" class="carousel slide carousel-fade" data-bs-ride="carousel">
    <!-- Indicators -->
    <div class="carousel-indicators">
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="1" aria-label="Slide 2"></button>
      <button type="button" data-bs-target="#carouselVideoExample" data-bs-slide-to="2" aria-label="Slide 3"></button>
    </div>

    <!-- Inner -->
    <div class="carousel-inner">
      <!-- Single item -->
      <div class="carousel-item active">
        <video controls class="d-block w-100">
           <source src="https://placehold.co/3840x2160/blue/white.mp4?text=video 1" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>First slide label</h5>
          <p>
            Nulla vitae elit libero, a pharetra augue mollis interdum.
          </p>
        </div>
      </div>
      <!-- Single item -->
      <div class="carousel-item">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/black/white.mp4?text=video+2" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>Second slide label</h5>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </p>
        </div>
      </div>

      <!-- Single item -->
      <div class="carousel-item">
        <video controls class="d-block w-100">
          <source src="https://placehold.co/3840x2160/green/white.mp4?text=video+3" type="video/mp4" />
        </video>
        <div class="carousel-caption d-none d-md-block">
          <h5>Third slide label</h5>
          <p>
            Praesent commodo cursus magna, vel scelerisque nisl consectetur.
          </p>
        </div>
      </div>
    </div>
    <!-- Inner -->

    <!-- Controls -->
    <button class="carousel-control-prev" type="button" data-bs-target="#carouselVideoExample" data-bs-slide="prev">
                            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Previous</span>
                        </button>
    <button class="carousel-control-next" type="button" data-bs-target="#carouselVideoExample" data-bs-slide="next">
                            <span class="carousel-control-next-icon" aria-hidden="true"></span>
                            <span class="visually-hidden">Next</span>
                        </button>
  </div>
  <!-- Carousel wrapper -->

  <!-- Bootstrap 5.3 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap 5的轮播控制按钮默认在hover状态下带有背景色，你可以通过自定义CSS直接覆盖这个默认样式：

/* 移除轮播控制按钮hover时的背景 */
.carousel-control-prev:hover,
.carousel-control-next:hover {
    background-color: transparent !important;
}

如果需要同时调整箭头图标的颜色，也可以添加以下代码（可选）：

/* 自定义箭头图标颜色，替换%23yourColor为目标颜色值，比如%23000代表黑色 */
.carousel-control-prev-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23yourColor'%3e%3cpath d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z'/%3e%3c/svg%3e");
}

.carousel-control-next-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23yourColor'%3e%3cpath d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

注意：确保你的自定义CSS代码放在Bootstrap的CSS引入之后，这样才能正确覆盖默认样式。

内容的提问来源于stack exchange，提问作者Gabriel Stokes