Estoy usando una lista para filtrar una serie de otros elementos. Básicamente, necesito ayuda para que muestre visualmente cuál es el elemento seleccionado más recientemente,

• Estado actual: mis eventos actuales de mouseover, mouseout y clic hacen posible que los eventos de pasar el mouse y hacer clic creen el formato de estilo deseado.
• Efecto deseado 1: cuando el usuario hace clic en un primer elemento y saca el mouse, ese elemento debe permanecer formateado de cierta manera (actualmente se apaga debido al mouse out).
• Efecto deseado 2: cuando el usuario hace clic en otro elemento posterior, ese elemento posterior debe tomar el formato y el primero debe perder ese formato.

HTML

 <div class="sidebar"> <div class="heading"> <h1>Select Country</h1> </div> <ul class="countryList"> <li class="countryItem" id="australia">Australia</li> <li class="countryItem" id="france">France</li> <li class="countryItem" id="germany">Germany</li> </ul> </div>

JS

 // I'm using this 'items' bit to control a lot of other code so would prefer a solution which keeps it. const items = document.getElementsByClassName('countryItem') console.log(Array.from(items)) // Some Mouse Events Array.from(items).forEach(function(item) { item.addEventListener('mouseover', function(handleMouseOver) { item.style.color = '#007dbc'; item.style.fontWeight = "700"; }) }) Array.from(items).forEach(function(item) { item.addEventListener('mouseout', function(handleMouseOut) { item.style.color = '#000'; item.style.fontWeight = "400"; }) }) Array.from(items).forEach(function(item) { item.addEventListener('click', function(handleClick) { item.style.color = '#0007dbc'; item.style.fontWeight = "700"; }) })

CSS

 ul { list-style-type: none; font-size:12px; margin: 0; padding: 20px; } li { cursor:pointer; }

¡Gracias!