He estado buscando en stackoverflow en inglés y solo encuentro respuestas utilizando jQuery.
Necesito que al hacer clic sobre un enlace ese mismo se mantenga activo con un determinado color, posteriormente al cerrarlo que vuelva a recuperar sus propiedades principales y pseudoclases, es decir cuando pase el ratón por encima me muestre otro color.
Al hacer clic sobre la función:
targetSolutions.addEventListener('click', () => {
let target = document.querySelector('.sub-menu-1');
target.style.display = (target.style.display === 'block') ? 'none' : 'block';
Agrego dentro de la función para conseguir el resultado:
var link = document.getElementById('linkSoluciones');
if (target.style.display === 'block') {
link.style.color = (target.style.color = '#fffffff') ? '#ff5722' : '#ffffff';
Hago uso de un operador ternario donde si el target es de color blanco, al hacer clic sobre el cambiar al color naranja, sino:
link.style.color = '#ffffff';
Lo hace todo, pero cuando vuelvo a pasar el ratón por encima del enlace la pseudoclase :hover no hace nada, supongo que es por que le digo que si no se cumple el condicional me devuelva color:'#ffffff'.
¿Cual es la solución?
Solo Javascript o CSS.