JSFiddle - React, Tailwind, and code Playground

by Jehuty

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="js-target">TARGET</p>
<p class="js-target">TARGET</p>
<p class="js-target">TARGET</p>
<p class="js-target">TARGET</p>
<p class="js-target">TARGET</p>
<p class="js-target">TARGET</p>
<p class="js-target">TARGET</p>

JavaScript

var hover;

$('.js-target').on({
  mouseenter: function () {
  	var $this = $(this);
    hover = setTimeout(function() {
    	$this.css('color', '#ff0000');
      alert('setTimeout callback');
    }, 1000);
  },
  mouseleave: function () {
    clearTimeout(hover);
  }
});


/*

// - Doesn't handle the case when bounding boxes of elements overlap
// - Transpile with Babel for older browsers
let timer;

const startCountdown = (e) => {
	timer = setTimeout(() => {
  	e.target.style.color = '#ff0000';
  }, 1000);		
};

const endCountdown = (e) => {
	clearTimeout(timer);
};

const target = document.querySelectorAll('.js-target');
target.forEach(item => {
	item.addEventListener('mouseover', startCountdown);
	item.addEventListener('mouseleave', endCountdown);
});
*/