How to set hover effect when hovering over image with timeout?

Question

JavaScript

Hello,

You need to set the Hover effect, which will not work immediately when hovering over the picture, but only if the mouse cursor lingers on the picture for 1 second. If the cursor only "touched" the image, then nothing is done. How can this be implemented?

Tried:

setTimeout(function() {
  ...
}, 500)

but, it only delays the start of the effect.

<div class="thumb">
  <a href="#">
    <img src="preview-1.jpg"/>
  </a>
</div>
<div class="thumb">
  <a href="#">
    <img src="preview-2.jpg"/>
  </a>
</div>

Answer 1

You started right, but didn't finish a bit :)
jsfiddle.net/DelphinPRO/b1ybz2jn

Answer 2

div .thumb {
transition: 0s background-color;
}
div .thumb:hover{
background-color:red;
transition-delay:1s;
}

Answer 3

What if I don't have a mouse or cursor on my iPad?