How to fire event after 3 sec of hovering

Question

I have a div and I want to fire an event only after user continuous hovers his mouse for 3 sec. My code doesn't work well because it fires right after hover and doesn't "wait".

Code:

$(".inner_pic").mouseenter(function () {
    setTimeout(function () {
        alert('testing');
    }, 3000);
}).mouseleave(function () {
    alert('finish');
});

Show more code. Create an [MCVE](http://stackoverflow.com/help/mcve) — Amit, Jun 30 '15 at 13:36
http://jsfiddle.net/nn33vwvn/ seems to work to me. What seems to be the issue? — Daniel Casserly, Jun 30 '15 at 13:38

score 28 · Accepted Answer · answered Jun 30 '15 at 13:37

28

You need to store timeout id somewhere and clear it on mouseout. It's convenient to use data property to save this id:

$(".inner_pic").mouseenter(function () {
    $(this).data('timeout', setTimeout(function () {
        alert('testing');
    }, 3000));
}).mouseleave(function () {
    clearTimeout($(this).data('timeout'));
    alert('finish');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">PICTURE</div>

answered Jun 30 '15 at 13:37

dfsq

191,768
25
236
258

2

Fun note: With Internet Explorer 11 (maybe other browsers / versions) activating the alert then hovering over the alert with my mouse causes plenty more to open. – ThePyroEagle Jun 30 '15 at 15:28
1

@ThePyroEagle Wow, this is very weird browser! Turns out that IE11 fires mouseout event in this case even though alert is on top, which would prevent subsequent interactions with the page. Strange quirk. – dfsq Jun 30 '15 at 15:50

yakutsa · Answer 2 · 2015-07-01T06:20:22.663

12

You can achieve this by delay option:

Working demo

$('#elem').popover({
    trigger: "hover",
    delay: {show : 3000, hide : 0} });

edited Jul 01 '15 at 06:20

answered Jun 30 '15 at 13:37

yakutsa

642
3
13

1

Not in jQuery. There is no jquery `popover`. – Jon P Jun 30 '15 at 23:40
@JonP, yes, you are correct. You can fire any event in jquery by simply changing `popover` . `popover` comes from bootstrap js library. – yakutsa Jul 01 '15 at 06:21

score 3 · Answer 3 · answered Jun 30 '15 at 13:39

3

Checkout the below code

var myVar;
$( "div#container" )
  .mouseover(function() {
    myVar = setTimeout(function(){ alert("Hello"); }, 3000);
  })
  .mouseout(function() {
    clearTimeout(myVar);
  });

div {
  background: red;
  margin: 20px;
  height: 100px;
  width: 100px;
  display:block;
  cursor: pointer;
  }
div:hover {
  background: yellow;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container"></div>

answered Jun 30 '15 at 13:39

Pratik Shah

788
5
8

I like this solution. Can you attach this to every container with a specific class rather than by id? – Soma Holiday May 26 '17 at 22:11
@SomaHoliday: Yes of course you can use **ClassName as a selector instead of an ID**.. just use `$("div.ClassName")` – Pratik Shah May 28 '17 at 07:33

score 2 · Answer 4 · answered Jun 30 '15 at 13:43

    
    var st;
    $(".inner_pic").mouseenter(function(e) { 
        var that = this;
        st = setTimeout(function() {
            alert('testing');
        }, 3000);
    }).mouseleave(function() {
         clearTimeout( st );    
         alert('finish'); 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inner_pic">
  <h3>Picture Here - Hover me</h3>
</div>

score 2 · Answer 5 · edited May 23 '17 at 11:44

2

Assuming you have a div with id of myelement, you can do this:

var divMouseOver;
$('#myelement').mouseover(function() {
  divMouseOver = setTimeout(function() {
     alert("3 seconds!"); //change this to your action
  }, 3000);
});
$('#myelement').mouseout(function() {
  if (divMouseOver) {
    clearTimeout(divMouseOver);
  }
});

BTW, tere's a helpful clarifying question re: using mouseenter and mouseover right here: Jquery mouseenter() vs mouseover(). Consider this when choosing which to use.

edited May 23 '17 at 11:44

Community

1
1

answered Jun 30 '15 at 13:43

Marc

11,403
2
35
45

`divMouseDown` should be `divMouseOver` though. – Sebastian Nette Jun 30 '15 at 13:44

How to fire event after 3 sec of hovering

5 Answers5