改变点的颜色

Question

我想在非活动或活动状态下更改点的默认颜色背景。我使用 Owl Carousel Slider

这里是我要改变点颜色的点。

我尝试了下面的CSS，但它无法正常工作

.owl-pagination .owl-page{
     background-color: white;

}
.owl-pagination .owl-page .active
{
    background-color: aqua;
}

Answer 1

这是为Owl Carousel：

.owl-theme .owl-dots .owl-dot span{
    width:10px;
    height:10px;
    margin:5px 7px;
    background: #b71616 !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

这是Bootstrap Carousel：

.carousel-indicators li{
    display:inline-block;
    width:10px;
    height:10px;
    margin:1px;
    text-indent:-999px;
    cursor:pointer;
    background-color: #ff0000 !important;
    border:1px solid #fff;
    border-radius:10px;
}

Answer 2

试

$(document).ready(function() {
    $('.approved').on('click', function(){
        $('span.badge').each(function() {
            alert( $(this).html());
        });       

    });//Onclick
});

Answer 3

更改所有点的颜色的解决方案：

.owl-carousel span {
    width:10px;
    height:10px;
    margin:5px 7px;
    background: blue !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}

更改活动点的颜色的方法：

.owl-carousel .active span {
    width:10px;
    height:10px;
    margin:5px 7px;
    background: red !important;
    display:block;
    -webkit-backface-visibility:visible;
    -webkit-transition:opacity 200ms ease;
    -moz-transition:opacity 200ms ease;
    -ms-transition:opacity 200ms ease;
    -o-transition:opacity 200ms ease;
    transition:opacity 200ms ease;
    -webkit-border-radius:30px;
    -moz-border-radius:30px;
    border-radius:30px;
}