Soy nuevo en web y css. Traté de hacer mi botón más bonito, pero el color del botón no cambió. Lo siento si solo fue mi tonto error.
índice.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Word Search Maker</title> </head> <body> <div class="title-h1"> <h1> Simple Word Search maker </h1> </div> <div class="start"> <button id="start-button">Start ➝</button> </div> <script src="script.js"></script> <link rel="stylesheet" href="style.css"> </body> </html>estilo.css:
html { background-color: lavender; } #start-button { background-color: transparent; border: solid 1px black; border-radius: 6px; width: 100px; height: 25px; box-align: center; font-size: 15px; text-align: center; } .start { display: table; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } .title-h1 { display: table; margin-left: auto; margin-right: auto; margin-top: auto; margin-bottom: auto; } .active { background-color: #374151; border: solid 1px black; border-radius: 6px; width: 100px; height: 25px; box-align: center; font-size: 15px; text-align: center; transition: 0.5s; color: white; }guión.js
const startButton = document.querySelector("#start-button"); const activeclass = "active"; function handlestartBtnMouseEnter() { startButton.classList.add(activeclass); } function handlestartBtnMouseLeave() { startButton.classList.remove(activeclass); } startButton.addEventListener("mouseenter", handlestartBtnMouseEnter); startButton.addEventListener("mouseleave", handlestartBtnMouseLeave);Este código cambió el color del texto a blanco, pero el color del botón no cambió. Vi que se agregó la clase. Perdón por los errores gramaticales y ortográficos. El inglés no es mi primer idioma.
Después de agregar la clase .active con JavaScript, su elemento tiene una clase y una ID, en cuyo caso se prioriza la ID. Como su elemento no tenía un color de fuente, lo aplica pero no puede sobrescribir su background-color .
Sugiero no usar JavaScript en absoluto aquí a menos que tenga una razón especial. Simplemente use la pseudo clase :hover de esta manera:
#start-button:hover { background-color: #374151; transition: 0.5s; color: white; }En caso de que quiera usar JavaScript de todos modos, puede solucionar su problema de especificidad actualizando el selector como se menciona en otra respuesta:
#start-button.active { background-color: #374151; transition: 0.5s; color: white; }usar para peseudo-clase ir al enlace: ingrese la descripción del enlace aquí
#start-button:active { // your style ------ }Es porque cuando el mouse ingresa al botón, el primer color de fondo que se aplica al botón es el color transparente que se indica en #start-button. La forma en que funciona css, aplicará la primera propiedad que captura para un elemento específico si se menciona dos veces en diferentes clases, por lo que para obligar a css a aplicar el color que desea cuando se activa la clase activa, debe agregar !important al fondo -color en la clase activa así:
color de fondo: #374151 !importante;