Current Dot от Slider в белом

Question

Я реализовал Слайдер из w3school.Также из другого примера я реализовал эти точки для отслеживания слайдов.Если я нажимаю на них, они работают нормально, проблема в том, что мне не удается заставить текущую / активную точку (из фактического слайда в позиции) отображаться в чистом белом, чтобы вы знали, где вы находитесь в этой точке.

HTML

<div class="dotsCentralizer">
    <span class="dots white" onclick="currentDiv(1)"></span>
    <span class="dots white" onclick="currentDiv(2)"></span>
    <span class="dots white" onclick="currentDiv(3)"></span>
    <span class="dots white" onclick="currentDiv(4)"></span>
</div>

CSS

.dots {
background-color: #000;
color: #fff;
display: inline-block;
width: 15px;
height: 15px;
border-radius: 50%;
margin-left: 5px;
margin-right: 5px;
}

.dots {
background-color: #000!important;
}

.white:hover {
background-color: #fff!important;
}

Javascript

 <script>
 var slideIndex = 1;
 showDivs(slideIndex);

 var myIndex = 0;
 carousel();

 function currentDiv(n) {
 showDivs(slideIndex = n);
 }

 function carousel() {
 var i;
 var x = document.getElementsByClassName("mySlides");
 for (i = 0; i < x.length; i++) {
   x[i].style.display = "none";  
 }
 myIndex++;
 if (myIndex > x.length) {myIndex = 1}    
 x[myIndex-1].style.display = "block";  
 setTimeout(carousel, 5000); // Change image every 2 seconds
 } 

 function showDivs(n) {
 var i;
 var x = document.getElementsByClassName("mySlides");
 var dots = document.getElementsByClassName("dots");
 if (n > x.length) {slideIndex = 1}    
 if (n < 1) {slideIndex = x.length}
 for (i = 0; i < x.length; i++) {
 x[i].style.display = "none";  
 }
 for (i = 0; i < dots.length; i++) {
 dots[i].className = dots[i].className.replace(" white", "");
 }
 x[slideIndex-1].style.display = "block";  
 dots[slideIndex-1].className += " white";
 }
 </script>

Может ли кто-нибудь дать мне руководство?спасибо!

Answer 1

Класс белого добавляет точку, когда вы щелкаете по нему, но вы добавляете цвет при наведении

.white:hover {
  background-color: #fff!important;
}

меняется на

.white {
  background-color: #fff!important;
}