JS: desplázate a un div relacionado con el hover

Tengo un par de div que te permiten pasar el cursor sobre #HoverMe para ver los contenidos en #hidden div (que está oculto cuando no está suspendido). Si la lista es un poco larga, es desplazable. Sin embargo, no puedo desplazarme mientras estoy #HoverMe div. Si quiero desplazar #Hidden div, entonces tengo que moverme, lo que hace que desaparezca nuevamente (obviamente).

Me gustaría poder #HoverMe a #HoverMe y #HoverMe 5 segundos en moverme a #hidden . Si coloca #hidden antes de desaparecer, detendrá el temporizador de ocultación y podrá desplazarse y verificar el contenido.

Una posible peor solución alternativa:

scroll #Hidden div mientras el mouse está en #HoverMe ?

Como se ve:

  ------------ --------- _ | #HoverMe | | #hidden |S| ------------ | --------|R| | car.name|O| |---------|L| | car.name|L| ---------|B| | car.name|A| |---------|R| | car.name| | ---------|_| 

Código:

 
Car
@foreach (var car in Model.Car) { @* Where the #hidden list get its content *@
@car.Name
}
var hoverEle = document.getElementById("HoverMe"); var popupEle = document.getElementById("hidden"); hoverEle.addEventListener('mouseover', function () { var hoverRect = hoverEle.getBoundingClientRect(); // get the position of the hover element popupEle.style.left = (hoverRect.right + 16) + "px"; popupEle.style.top = hoverRect.top + "px"; popupEle.style.display = "block"; }, false); hoverEle.addEventListener('mouseout', function () { popupEle.style.display = "none"; }, false);

(Por cierto, esta pregunta está etiquetada como jQuery pero en realidad estás usando solo JS vainilla. ¡No hay problema, por supuesto, solo para que sepas!)

Estás en el camino correcto, seguro. Creo que probablemente puedas manejarlo estableciendo un tiempo de espera y despejándolo.

 
Car

Puede progtwigr la acción de ocultación en lugar de ocultar instantáneamente su popover en el mouseout de su disparador o elementos de popover usando setTimeout y cancelarlo cuando pase el mouse o el popover de nuevo.

 window.onload = function () { var triggerEl = document.querySelector('.trigger'); var popoverEl = document.querySelector('.popover'); var hideTimer = null; triggerEl.addEventListener('mouseover', function () { showPopover(); }, false); triggerEl.addEventListener('mouseout', function () { scheduleHidingPopover(); }, false); popoverEl.addEventListener('mouseover', function () { cancelHidingPopover(); }, false); popoverEl.addEventListener('mouseout', function () { scheduleHidingPopover(); }, false); function showPopover() { cancelHidingPopover(); popoverEl.classList.remove("hidden"); } function hidePopover() { cancelHidingPopover(); popoverEl.classList.add("hidden"); } function scheduleHidingPopover() { cancelHidingPopover(); hideTimer = setTimeout(function () { hidePopover(); hideTimer = null; }, 1000); } function cancelHidingPopover() { if (hideTimer) { clearTimeout(hideTimer); hideTimer = null; } } }; 
 .trigger { display: inline-block; vertical-align: top; background-color: #eef; } .popover { display: inline-block; vertical-align: top; background-color: #fee; max-height: 100px; overflow: auto; } .hidden { display: none !important; } 
 
Hover over me