Mouseover for 1 second before triggering the event

Question

I've written a simple bit of code that shows a div on a mouseover event. I'd like to mouseover the element for 1s before the event takes place. Any ideas on how I can achieve this? with a brief explanation if possible so I know for next time.

$('.NavSelect h2').mouseover(function() {
$('.NavGroup').hide();
$('#' + $(this).prop('id').replace('item','content')).show();
});

As an aside to the question, I'd suggest replacing the ugly `$('#' + $(this).prop('id').replace('item','content'))` logic with a DOM traversal method, such as `find()` - if possible. — Rory McCrossan, Dec 14 '21 at 12:44
Relevant, for the difference between the two (current) answers: [what is the difference between mouseover and mouseenter](https://stackoverflow.com/questions/1104344/what-is-the-difference-between-the-mouseover-and-mouseenter-events) — freedomn-m, Dec 14 '21 at 14:10
Hey Rory, do you have any advice or reference information so I can look into making this more efficient =) — Anthony Whitefield, Dec 14 '21 at 17:45

th3g3ntl3man · Accepted Answer · 2021-12-14T14:00:21.237

2

If I understand what you want to do, you need a setTimeout:

$('.NavSelect h2').mouseover(function() {
  setTimeout(() => {
    $('.NavGroup').hide();
    $('#' + $(this).prop('id').replace('item','content')).show();
  }, 1000);
});

Here, the documentation

Update

If you would clear the timeout on mouseleave I suggest you somethig like this:

let time = 0;
$('.NavSelect h2').mouseover(function() {
  time = setTimeout(() => {
    $('.NavGroup').hide();
    $('#' + $(this).prop('id').replace('item','content')).show();
  }, 1000);
}).mouseleave(() => { clearTimeout(time); });

edited Dec 14 '21 at 14:00

answered Dec 14 '21 at 12:33

th3g3ntl3man

1,926
5
29
50

This works great, quick question. How would I use clearTimeout to cancel on mouseleave? – Anthony Whitefield Dec 14 '21 at 13:52
1

@AnthonyWhitefield I update my answer – th3g3ntl3man Dec 14 '21 at 14:00
Thanks works perfectly. – Anthony Whitefield Dec 14 '21 at 17:44

score 2 · Answer 2 · edited Dec 14 '21 at 14:08

2

It's probably best to keep this timeout in a data property and clear it on mouseout.

$('.NavSelect h2').mouseenter(function () {
    $(this).data('timeout', setTimeout(function () {
      $('.NavGroup').hide();
      $('#' + $(this).prop('id').replace('item','content')).show();
    }, 1000));
}).mouseleave(function () {
    clearTimeout($(this).data('timeout'));
    alert('mouse left');
});

edited Dec 14 '21 at 14:08

freedomn-m

27,664
8
35
57

answered Dec 14 '21 at 12:35

Owen Halliday

66
3

This way - it won't fire if you move your mouse out of the element before the second is up. – Owen Halliday Dec 14 '21 at 12:41

Mouseover for 1 second before triggering the event

2 Answers2

Update