JSFiddle - React, Tailwind, and code Playground

HTML

<button class="header-right-menu__search">hover me</button>

CSS

.header-right-menu__search {
  transition: .5s;
  padding: 20px 50px;
  background: gray;
}
.header-right-menu__search_focus {
  background: red;
  color: #fff;
}

JavaScript

let timeoutId = null;
var $delay = 500;
var modify_class = 'header-right-menu__search_focus';

$(".header-right-menu__search").hover(
  function () {
      $(this).addClass(modify_class);
  	  clearTimeout(timeoutId);
	},
  function () {
    timeoutId = setTimeout(() => {
      $(this).removeClass(modify_class);
    }, $delay);
  }
);