JSFiddle - React, Tailwind, and code Playground

HTML

<div id="menu_left">
  <a href="#" class="menu">AFRICA</a>
  <a href="#" class="menu">AMERICA</a>
  <a href="#" class="menu">ANTARCTICA</a>
  <a href="#" class="menu">ASIA</a>
  <a href="#" class="menu">AUSTRALIA</a>
  <a href="#" class="menu">EUROPE</a>
</div>

CSS

#menu_left a {
  font-family: tahoma;
  width: 200px;
  padding: 5px;
  margin: 10px 0;
  display: block;
  text-decoration: none;
}

.menu {
  border: 1px solid #FF0000;
  background: #FFFF00;
  color: #FF0000;
}

.menu_over {
  border: 1px solid #000000;
  background: #FF0000;
  color: #ffffff;
}

JavaScript

var toggle = function() {
      $(this).stop(true, true).toggleClass("menu_over", 1000);
    };

    $("#menu_left a.menu").hover(toggle, toggle);