CODEWITHSUNDEEP
javascriptjqueryhtmlcssmousehover
user4741152
user4741152

Reputation:

How to hide element after mouse unhover 5 seconds ago?

#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?

Upvotes: 5

Views: 6002

Answers (4)

Danilo Ivanovic
Danilo Ivanovic

Reputation: 1226

You can use this 

var delayMillis = 5000; //5 seconds

setTimeout(function() {
  //your code.
}, delayMillis);

Code will be executed with 5 second delay.

$("#div1").hover(function(){
    $('#div2').show();
},function(){
    $('#div2').hide();
});

setTimeout(fade_out, 5000);

function fade_out() {
  $("#div2").hide();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

<div id="container">
  <div id="div1">Div1</div>
  <div id="div2">Div2</div>
</div>
</body>
</html>

Upvotes: 0

David Thomas
David Thomas

Reputation: 253318

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>

Upvotes: 2

Mohammad
Mohammad

Reputation: 21489

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>

Upvotes: 2

mehulmpt
mehulmpt

Reputation: 16567

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>

Upvotes: 2

Related Questions