时间戳

首页 > 解决方案 > 自定义猫头鹰旋转木马点

html - 自定义猫头鹰旋转木马点

问题描述

我想自定义 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;
}

有什么建议么？谢谢

标签： htmlcssowl-carousel

解决方案

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

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

推荐阅读