#div1 { display: block; } #div2 { display: none; } #container:hover > #div2 { display: block; } <div id="container"> <div id="div1">Div1</div> <div id="div2">Div2</div> </div> Aquí tengo un poco de código que, cada vez que se pasa el mouse sobre Div1 , se muestra Div2 . Cuando no se desplaza sobre Div1 o Div2 , Div2 se oculta.
¿Cómo puedo hacer que cuando el mouse se desplaza sobre Div1 , pero no se ha movido durante 5 segundos, Div2 se oculta?
Necesita usar javascript o jquery para hacer este trabajo. Cuando #div1 se desplace, muestre #div2 y cuando se desplace, use la función javascript setTimeout() para ocultar #div2 después de 5 segundos.
$("#div1").hover(function(){ $("#div2").show(); }, function(){ setTimeout(function(){ $("#div2").hide(); }, 5000); }); Si entra y sale rápidamente durante varias veces, el intervalo no funciona correctamente. Debe almacenar el intervalo en la variable y en cada evento que no se desplace, use clearInterval() para eliminar el intervalo anterior.
var timer; $("#div1").hover(function(){ $("#div2").show(); }, function(){ clearInterval(timer); timer = setTimeout(function(){ $("#div2").hide(); }, 5000); }); var timer; $("#div1").hover(function(){ $("#div2").show(); }, function(){ clearInterval(timer); timer = setTimeout(function(){ $("#div2").hide(); }, 5000); }); #div2 { display: none } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="container"> <div id="div1">Div1</div> <div id="div2">Div2</div> </div>Las otras 2 respuestas están incompletas. Intente pasar el cursor sobre el enlace dos o tres veces en 5 segundos y la lógica se rompe. Prueba esto y, obviamente, elimina el CSS.
var intervalIsGoingOn = false; document.getElementById('div1').onmouseover = function() { document.getElementById('div2').style.display = "block"; } document.getElementById('div1').onmouseout = function() { if(intervalIsGoingOn) return; intervalIsGoingOn = true; setTimeout(function() { document.getElementById('div2').style.display = "none"; intervalIsGoingOn = false; }, 1000); }; <div id="container"> <div id="div1">Div1</div> <div id="div2" style="display:none">Div2</div> </div>Con la estructura HTML actual, ocultando un elemento hermano, esto es perfectamente posible con las transiciones CSS:
#div1 { display: block; } #div2 { /* Using opacity to hide the element, since animating from 'display: none' or 'visibility: hidden' is not possible: */ opacity: 0; /* Setting the transition-delay to five seconds (5s), for the non-hovered state of the element: */ transition-delay: 5s; } #container:hover>#div2 { /* Updating the opacity to 1; to show the element with no transparency (adjust to taste): */ opacity: 1; /* setting the property to animate ('opacity'), over a period 0.3 seconds with a linear transition: */ transition: opacity 0.3s linear; } <div id="container"> <div id="div1">Div1</div> <div id="div2">Div2</div> </div> Sin embargo, si necesita ocultar un elemento hermano anterior, es posible emular el comportamiento usando CSS y cajas flexibles; este enfoque solo emula el comportamiento, ya que los elementos permanecen en sus posiciones originales en la fuente y se reordenan utilizando el order de caja flexible:
#container { /* displays the element as a flex container element, able to contain, and display, flex items appropriately: */ display: flex; /* sets the flex-direction to follow a top-to-bottom layout (sort of emulating 'display: block': */ flex-direction: column; } #div2 { opacity: 0; transition-delay: 5s; /* Positions the element ahead of elements with an 'order' property of 0 or greater (the default 'order' property is 1):*/ order: -1; } #container:hover>#div2 { opacity: 1; transition: opacity 0.3s linear; } <div id="container"> <div id="div1">Div1</div> <div id="div2">Div2</div> </div>