Estoy trabajando en un juego de preguntas (tenga en cuenta que las opciones de respuesta están hechas de etiquetas de anclaje)
Agregué código en options.forEach eventListener, que establecería las opciones de eventos de puntero en "ninguno" para que no pueda elegir otra respuesta una vez que se haya hecho clic en una.
// Opción Eventos BTN
// Only select one option if ("clicked") { options.forEach((op) => { op.style.pointerEvents = "none"; }); }}); }); Intenté: hacer el btn.eventListener (que es el siguiente botón), entre otras cosas, establecer el color bg nuevamente en gris y establecer las opciones style.pointerEvents = "auto"; para que pueda hacer clic en una opción para la siguiente pregunta.
btn.addEventListener("click", () => { currentQuestion += 1; getQuestion(); options.forEach((op) => { op.style.backgroundColor = $btnCol; op.style.pointerEvents = "auto"; }); });Problema: este código funciona para volver a habilitar la capacidad de hacer clic en una opción nuevamente, pero también quiero que vuelva el efecto de desplazamiento. ¿Cómo puedo hacer esto?
Creo que es porque está configurando el color de fondo en javascript y se aplica al elemento en el nivel en línea (style="background-color: red;") que viene antes en términos de precedencia del archivo css externo.
Para una mejor explicación: Aquí
Y la solución para eso debe agregar !important en su archivo css externo.
Aquí hay un ejemplo:
.a { background-color: red; } .a:hover { background-color: blue; } .b { background-color: red; } .b:hover { background-color: blue !important; } <div class="a" style="background-color: red;">without !important</div> <div class="b" style="background-color: red;">with !important</div> Como puede ver aquí, el que no tiene !important no cambia de color cuando se desplaza el cursor, pero el que sí lo tiene sí cambia.
Por lo tanto, debe agregar !important a su código en la sección flotante.