自定义猫头鹰旋转木马点

问题描述

我想自定义 Owl Carousel 圆点。不活动时，它只是一个带有灰色边框和白色背景的圆圈。当我悬停或处于活动状态时，我希望在该圆圈内有一个黄点。我尝试用一​​些 css 来做到这一点，但我一无所获。

我的代码

<div class="owl-carousel owl-theme">
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
  <div class="item">
    <h4><img src="https://via.placeholder.com/150"></h4>
  </div>
</div>

<div class="owl-dots">
  <button role="button" class="owl-dot active"><span></span></button>
  <button role="button" class="owl-dot"><span></span></button>
  <button role="button" class="owl-dot"><span></span></button>
  <button role="button" class="owl-dot"><span></span></button>
</div>

CSS：

.owl-dots button.owl-dot.active span,.owl-dots button.owl-dot:hover span {
   background-color: yellow;
   border-radius: 50%;
   height: 16px;
   width: 16px;
}
.owl-dots button.owl-dot{
  border: 1px solid gray;
  background: white;
   border-radius: 50%;
   height: 19px;
   width: 19px;
   position: relative;
}

有什么建议吗？谢谢

解决方法

我问得太快了。找到了答案。这是任何可能想知道的人的代码

.owl-dots {
    text-align: center;
}
.owl-dots button.owl-dot.active span,.owl-dots button.owl-dot:hover span {
  background-color: #FEAE00;
  border-radius: 50%;
  height: 12px;
  width: 12px;
  position: absolute;
  top: 1px;
  left:1px;
}
.owl-dots button.owl-dot{
  border: 1px solid gray;
  background: white;
   border-radius: 50%;
   height: 16px;
   width: 16px;
   position: relative;
}