Tengo un botón que tiene un cambio de color cuando se desplaza. Y en Script, el color del botón cambia cuando se produce un evento de clic. Sin embargo, Hover funciona cuando se carga la página, pero después de que cambia el color, no funciona. El código está abajo:
var count = 1; function setColor(btn, color) { var property = document.getElementById(btn); if (count == 0) { property.style.backgroundColor = "white"; count = 1; } else { property.style.backgroundColor = color; count = 0; } } .button { background-color: #4caf50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4caf50; } .button1:hover { background-color: red; color: black; border: 2px solid #4caf50; } <h2> Hoverable Buttons</h2> <button id="buttonGreen" class="button button1" onclick="setColor('buttonGreen', '#122256')"> Green</button>Después de hacer clic, se produce el evento del botón y el color cambia a azul oscuro y el desplazamiento no funciona.
Al hacer clic en el botón, se agregan estilos en línea que tienen una prioridad más alta debido a que se ignoran los cambios de propiedad flotante. Puede agregar !important para deshacerse del problema
.button1:hover { background-color: red !important; color: black !important; border: 2px solid #4caf50; } <html> <head> <style> .button { background-color: #4caf50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4caf50; } .button1:hover { background-color: red !important; color: black !important; border: 2px solid #4caf50; } </style> <script> var count = 1; function setColor(btn, color) { var property = document.getElementById(btn); if (count == 0) { property.style.backgroundColor = "white"; count = 1; } else { property.style.backgroundColor = color; count = 0; } } </script> </head> <body> <h2>Hoverable Buttons</h2> <button id="buttonGreen" class="button button1" onclick="setColor('buttonGreen', '#122256')" ; > Green </button> </body> </html>El estilo en línea (aplicado a través del atributo de style ) tiene prioridad sobre el estilo aplicado de CSS (aplicado a través del atributo class ).
Antes de hacer clic, no había un background-color definido a través de style , después de hacer clic, está anulando su CSS .button1:hover background-color . Consulte la documentación sobre la especificidad de CSS para obtener más detalles sobre este tema.
Para ver el efecto de desplazamiento después de hacer clic en el botón, intente actualizar su .button1:hover a lo siguiente:
.button1:hover { background-color: red !important; color: black; border: 2px solid #4caf50; } Tenga en cuenta el uso de !important que le indica al navegador que dé prioridad sobre el estilo en línea.
⚠️ El uso de !important generalmente no es una buena práctica, por lo tanto, no considere que esto sea una solución, sino un tema para analizar.
Eso ocurre porque configuraste el estilo de fondo en blanco. Cambie esta línea en su condición. Eliminaría el elemento de estilo. Pero puede establecer un fondo transparente. ¡Cómo eres!
if (count == 0) { // property.style.backgroundColor = "white"; property.removeAttribute('style'); ...ejemplo de trabajo
var count = 1; function setColor(btn, color) { var property = document.getElementById(btn); if (count == 0) { property.removeAttribute('style'); count = 1; } else { property.style.backgroundColor = color; count = 0; } } .button { background-color: #4caf50; /* Green */ border: none; color: white; padding: 16px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4caf50; } .button1:hover { background-color: red; color: black; border: 2px solid #4caf50; } <html> <head> <style> </style> <script> </script> </head> <body> <h2>Hoverable Buttons</h2> <button id="buttonGreen" class="button button1" onclick="setColor('buttonGreen', '#122256')" ; > Green1 </button> </body> </html>Nota Pero es mejor usar clases y luego la función de alternar js.