如何使用 CSS 绘制在 Bootstrap Carousel 指示器中移动的内圆？

问题描述

如下所示：

悬停需要如下：

目前我写的代码如下：

<style lang="sass">
.carousel-indicators li
  background-color: transparent
  border: 0
  border-radius: 100%
  Box-shadow: 0 0 0 .2rem rgba(255,255,1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
.carousel-indicators li:hover
  background-color: #fff
  border: 0
  border-radius: 100%
  Box-shadow: 0 0 0 .2rem rgba(255,1)
  height: 22px
  margin-left: 15px
  margin-right: 15px
  width: 22px
</style>

解决方法

使用 pseudo-elements 这样做。

首先定位 li，它也作为非活动状态：

.carousel-indicators li {
  border-radius: 50%;
  width: 6px;
  height: 6px;
  padding: 4px;
  position: relative;
  margin: 0 15px;
  background-color: transparent;
  opacity: 1;
}

现在创建 border 使用 pseudo-elements：

.carousel-indicators li:after {
  border-radius: 50%;
  padding: 10px;
  border: 4px solid #fff;
  position: absolute;
  content: "";
  top: -7px;
  left: -7px;
  bottom: -7px;
  right: -7px;
}

我们已将背景 transparent 分配给 li，但我们希望背景 white 处于 active 状态，

.carousel-indicators li.active {
  background-color: white;
}

代码笔：https://codepen.io/manaskhandelwal1/pen/abmRbZv

bootstrap-4 indicator