#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>Here I have a bit of code that, whenever, Div1 is hovered by the mouse, Div2 shows. When not hovering over Div1 or Div2, Div2 hides itself.
How can I make it that when the mouse is hovering over Div1, but has not been moved for 5 seconds, Div2 hides itself?
You need to use javascript or jquery to do this work. When #div1 hovered, show #div2 and when it unhovered use javascript setTimeout() function to hide #div2 after 5 seconds.
$("#div1").hover(function(){
$("#div2").show();
}, function(){
setTimeout(function(){
$("#div2").hide();
}, 5000);
});
If you hover in and out quickly for multiple time, the interval doesn't work properly. You should store interval in variable and on every unhover event use clearInterval() to removing previous interval.
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>The other 2 answers are incomplete. Try to hover on the link twice or thrice within 5 seconds and the logic breaks. Try this, and obviously, remove 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>With the current HTML structure, hiding a sibling element, this is perfectly possible with CSS transitions:
#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>If, however, you need to hide a previous sibling element it's possible to emulate the behaviour using CSS and flex-boxes; this approach only emulates the behaviour, as the elements remain in their original positions in the source and are re-ordered using the flex-box order:
#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>