He leído muchas publicaciones aquí, pero no puedo encontrar la solución. ¿Alguna idea de por qué el color de desplazamiento no funciona en el segundo clic? (ejemplo con snippet o jsfiddle por favor) ¡¡¡Gracias!!!
function toggleButton() { var button = document.getElementById('toggle').style.backgroundColor; var color = ''; if (button !== 'pink') { color = 'pink'; document.getElementById('toggle').style.backgroundColor = color; document.getElementById('toggle').style.color = "#222"; } else if (button === 'pink') { color = '#2c475c'; document.getElementById('toggle').style.backgroundColor = color; document.getElementById('toggle').style.color = "#fff"; } } #toggle { padding: 20px 45px; background: green; color: #fff; border-radius:5px; font-weight:600; } #toggle:hover { background: aqua; } <button id="toggle" onclick="toggleButton();">TOGGLE</button >del comentario
cuando establece un estilo a través de javascript, se incluye en un atributo de estilo, que sobrescribe cualquier otro estilo que establezca desde una hoja de estilo. En lugar de establecer un nuevo estilo, agregue una clase classList.add('myNewClass') , para que pueda ser parte de la hoja de estilo con reglas que no son las más importantes
ejemplo
document.getElementById("toggle").addEventListener("click", myFunction); function myFunction() { if (this.classList.contains('pink')) { this.classList.toggle('darkblue'); } this.classList.toggle('pink'); }; #toggle { padding: 20px 45px; background: green; color: #fff; border-radius: 5px; font-weight: 600; } #toggle:hover, #toggle.pink:hover, #toggle.darkblue:hover{ background: aqua; } #toggle.pink { background-color: pink; color: #222; } #toggle.darkblue { background: #2c475c; color: white; } <button id="toggle">TOGGLE</button >Porque establece el fondo con estilo en línea , que tiene una mayor especificidad que su CSS. Si desea anular cualquier estilo en línea, debe hacer que su estilo en CSS sea !important .
#toggle:hover { background: aqua !important; } Como lo mencionó @ G-Cyrillus , la mejor manera es crear clases con el color que necesita para el botón y alternar esas clases (y no el estilo en línea). Para su código, sería bueno crear 2 clases: para pink y grey .
.pink { color: #222; background-color: pink; } .grey { color: #fff; background-color: #2c475c; }Ahora solo necesita editar su archivo JS, para que funcione con sus nuevas clases.
function toggleButton() { var button = document.getElementById("toggle"); if (button.classList.contains("grey")) { button.classList.remove("grey"); button.classList.add("pink"); } else { button.classList.remove("pink"); button.classList.add("grey"); } } Y debido a que :hover tiene una mayor especificidad que la clase simple pink o grey , activará sus estilos de desplazamiento.