Есть ли способ удалить цвет фона в ссылке навигации по странице, не удаляя его из виджета слайд-шоу? ⇐ CSS

[Anonymous]

Я приложил скриншот, который лучше объясняет, чего я пытаюсь достичь. Мне не удается понять, как удалить цвет фона, который отображается в навигационной ссылке на страницу моего веб-сайта, без исчезновения цвета фона из точек, которые сопровождают слайд-шоу на моей странице. Можно ли добавить какой-нибудь дополнительный код, чтобы различать эти два понятия?
Проблема связана с этим разделом кода:

Код: Выделить всё

.active, .dot:hover {
background-color: #717171;
}

Вот полный код, который я использую для слайд-шоу:

Код: Выделить всё

let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function currentSlide(n) {
showSlides(slideIndex = n);
}

function showSlides(n) {
let i;
let slides = document.getElementsByClassName("mySlides");
let dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}

Код: Выделить всё

* {box-sizing: border-box}
body {font-family: Verdana, sans-serif; margin:0}
.mySlides {display: none}
img {vertical-align: middle;}

/* Slideshow container */
.slideshow-container {
max-width: 570px;
position: relative;
margin: auto;
}

/* Next & previous buttons */
.prev, .next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: #444444;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}

/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
background-color: rgba(255,255,255,0.8);
}

/* The dots/bullets/indicators */
.dot {
cursor: pointer;
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}

.active, .dot:hover {
background-color: #717171;
}

/* Fading animation */
.fade {
animation-name: fade;
animation-duration: 1.5s;
}

@keyframes fade {
from {opacity: .4}
to {opacity: 1}
}

/* On smaller screens, decrease text size */
@media only screen and (max-width: 300px) {
.prev, .next,.text {font-size: 11px}
}

Код: Выделить всё

[img]https://xofarragio.com/resources/bags/bag_1080x1080_01.png[/img]

[img]https://xofarragio.com/resources/bags/bag_1080x1080_02.png[/img]

[img]https://xofarragio.com/resources/bags/bag_1080x1080_03.png[/img]

[img]https://xofarragio.com/resources/bags/bag_1080x1080_04.png[/img]

[img]https://xofarragio.com/resources/bags/bag_1080x1080_05.png[/img]

[img]https://xofarragio.com/resources/bags/bag_1080x1080_06.png[/img]

[img]https://xofarragio.com/resources/bags/bag_1080x1080_07.png[/img]

❮
❯

Мои знания о том, как манипулировать кодом, ограничены, кроме удаления строка кода, которая является проблемой, мне не удалось ее понять.
Скриншот проблемы

Подробнее здесь: https://stackoverflow.com/questions/785 ... without-re