Tengo una barra lateral en mi página que contiene un formulario y algunos filtros. La barra lateral está inicialmente contraída y se puede expandir al pasar el mouse por encima a través de un evento 'mouseenter', y se colapsará cuando el mouse abandone la barra lateral a través de un evento 'mouseover'. Esto parece funcionar bien, pero tuve un error al intentar agregar un campo de entrada en mi formulario que contenía una lista de datos con una lista de opciones de texto. El problema ahora es que cuando paso el mouse sobre las opciones, la barra lateral desencadenará un evento de 'mouseleave' y colapsará, aunque los elementos de la lista de datos/opciones son un elemento secundario del elemento de la barra lateral. ¿Hay alguna manera de evitar que la barra lateral se colapse o es mejor usar select en lugar de datalist, ya que la etiqueta select parece no activar 'mouseleave'?
let sidebar = document.getElementById("sidebar"); sidebar.addEventListener("mouseenter", function(e) { toggleSidebar(e, BODY_CONTENT); }); sidebar.addEventListener("mouseleave", function(e) { toggleSidebar(e, BODY_CONTENT); }); function toggleSidebar(e, bodyContent) { if (e.type == "mouseenter") { e.target.style.width = e.target.dataset.expandWidth + "px"; document.getElementById(bodyContent).style.marginLeft = e.target.dataset.expandWidth + "px"; } else if (e.type == "mouseleave") { console.log(e); e.target.style.width = e.target.dataset.collapseWidth + "px"; document.getElementById(bodyContent).style.marginLeft = parseInt(e.target.dataset.collapseWidth) + 10 + "px"; } } <div class="sidebar" id="sidebar" data-collapse-width="50" data-expand-width="300" style="width: 50px;"> <div id="flex-sidebar"> <div class="sidebar-header"> <h2> Filters </h2> </div> <form action="" method="POST" autocomplete="off"> <div class="form-group"> <label for="category-filter">Category:</label> <input class="form-control me-2" type="search" placeholder="Filter Category" name="category-filter" value="" list="test"> <datalist class="sidebar-dropdown" id="test"> <option value="Option 1">1</option> <option value="Option 2">2</option> </datalist> </div> </form> </div> </div>