"Warstwy" backgroundów w css

Question

Cześć,
wczoraj prosiłem o pomoc ws. przycisku, który po kliknięciu zmienia kolor określonych divów. Przycisk działa, lecz background "zmiany" (czyli ten który ma byc po kliknieciu w przycisk)  wyświetla się "pod domyślnym" backgroundem, tak że praktycznie nie widać żadnej zmiany. Próbowałem, z ::after i ::before, z position:absolute;, ale to nie daje żadnego efektu :(.

<div id="zmiana"> <
<button>Zmiana</button> 
</div>

<div class="menu">
				<ol class="topmenu">
					<li> <a href="#">Strona Główna</a></li>
					<li> <a href="#">Wsparcie</a></li>
					<li> <a href="#">Kontakt</a></li>
					<li> <a href="#">Współpraca</a></li>
				</ol>
			</div>

.menu
{ 
	width: 625px;
	padding: 10px 0;
	background-color:rgb(66, 80, 156);
	border-bottom: 1px solid rgb(38, 46, 90);
	border-left: 1px solid rgb(38, 46, 90);
	border-right: 1px solid rgb(38, 46, 90);
	border-bottom-left-radius: 12px;
	border-bottom-right-radius: 12px;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
}
.menu ol
{
	padding: 0px;
	margin: 0;
	list-style-type: none;
	font-size: 15px;
	height: 20px;
	display: inline-block;
}
.menu ol a
{
	color: #ffffff;
	text-decoration: none;
	display: block;
	padding:0px 20px;
}
.menu ol > li
{
	float: left;
}
 .green { width: 100%; padding: 10px 0; text-align: center; border-top: 1px solid rgb(3, 87, 14); border-bottom: 1px solid rgb(3, 87, 14); background-color:rgb(0, 250, 21); }

function changeDivsColor() {
  [...document.querySelectorAll('.menu')].forEach(div => {
    div.classList.toggle('green');
  })
}
 
const button = document.querySelector('button');
button.addEventListener('click', changeDivsColor);

 

Answer 1

dodaj kod HTML, po problem będzie w tym, że twój przycisk manipuluje nie tym elementem co trzeba, zmieniając prawdopodobnie wartości elementu o innej klasie.