jquery - Owl Carousel - 以不同方式设计导航中的点

Question

我使用了 Owl Carousel 2 beta，我想对 slider 导航中的点进行不同的样式化(大小和颜色)。

像那样:

不幸的是我有这个:

我试过这段代码:

<div class="owl-dots">
     <div class="first owl-dot active"><span></span></div>
     <div class="second owl-dot"><span></span></div>
     <div class="third owl-dot"><span></span></div>
</div>

.owl-theme .owl-dots .owl-dot.first span {
    height: 18px;
    width: 18px;
}

.owl-theme .owl-dots .owl-dot.first:hover span,
.owl-theme .owl-dots .owl-dot.first .active  span {
    background-color: #00c0f1;
}

.owl-theme .owl-dots .owl-dot.second span {
    height: 15px;
    width: 15px;
}

.owl-theme .owl-dots .owl-dot.second:hover span, 
.owl-theme .owl-dots .owl-dot.second .active span {
    background-color: #add036;
}

.owl-theme .owl-dots .owl-dot.third span {
    height: 12px;
    width: 12px;
}

.owl-theme .owl-dots .owl-dot.third:hover span,
.owl-theme .owl-dots .owl-dot.third .active span {
    background-color: #ec2426;
}

Answer 1

在你所有的 css 上，owl-dot 类的选择器应该是

.owl-dot.first.active // remove the space you have between .active and .first

此外，您得到的到底有什么问题？在事件状态下无法更改大小或颜色？