JSFiddle - React, Tailwind, and code Playground

HTML

<div>
  <p>Fique 2 segundos com o mouse em cima do circulo.</p>
</div>
<br>
<div id="div-teste"></div>
<br>
<div id="segundo" class="d-block-no">
  <p>Aparece após 2 segundos com o mouse em cima. Se o mouse sair antes, ele não aparece</p>
</div>

CSS

.anima-a-coisa{
	background: #CA1EF0;
}

.anima-a-coisaa{
	background: #0A1EF0;
}

.d-block-ok{
	display: block;
}

.d-block-no{
	display: none;
}

#div-teste{
  border:1px solid #c0c0c0;
  border-radius:60%;
  width:160px;
  height:160px;
}

JavaScript

var time; // Variável para armazenar o temporizador (Necessário apenas para interrompe-lo)

function executaComDelay(){
  // função executada com delay
  let comDelay = document.getElementById("segundo");
  comDelay.classList.remove("d-block-no");
  comDelay.classList.add("d-block-ok");
  let comDelay2 = document.getElementById("div-teste");
  comDelay2.classList.remove("anima-a-coisa");
  comDelay2.classList.add("anima-a-coisaa");
}

$("#div-teste").on("mouseover",function(){ // Função mouse over
  // insere instruções
	$(this).addClass("anima-a-coisa");
  this.time = setTimeout(() => {executaComDelay();},2000); // Executa com delay
});

$("#div-teste").on("mouseout",function(){ // Função mouse out
  // interrompe instruções
  clearTimeout(this.time); // Para ele executar mesmo com o mouse já saído de cima, remova essa linha 
	$(this).removeClass("anima-a-coisaa");
	$(this).removeClass("anima-a-coisa");
	let comDelay = document.getElementById("segundo");
  comDelay.classList.remove("d-block-ok");
  comDelay.classList.add("d-block-no");
});