JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li><a data-id="1" href="#">Menu Item</a></li>
    <li><a data-id="2" href="#">Menu Item</a></li>
    <li><a data-id="3" href="#">Menu Item</a></li>
    <li><a data-id="4" href="#">Menu Item</a></li>
    <li><a data-id="5" href="#">Menu Item</a></li>
    <li><a data-id="6" href="#">Menu Item</a></li>
    <li><a data-id="7" href="#">Menu Item</a></li>
    <li><a data-id="8" href="#">Menu Item</a></li>
    <li><a data-id="9" href="#">Menu Item</a></li>
    <li><a data-id="10" href="#">Menu Item</a></li>
</ul>
<div> box </div>

CSS

* {
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box
}
ul {
    width: 250px;
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
}
li {
    float: left;
    width: 50%;
}
div {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    float: left;
    background-color: #ccc;
}

JavaScript

var dump =  new Object;
$('li > a').on('mouseout', function() {
    var _ = $(this),
	a = _.data('id');
    dump[a] = false;
});

$('li > a').on('mouseenter', function() {
			var _ = $(this),
			a = _.data('id');
            dump[a] = true;

			var call = function() {
				$.ajax({
					type:'GET',
					url: "ajax.php",
					cache: false,
					data: ({ 
                        id: a
                    }),
					header: "HTTP/1.1 200 OK",
					beforeSend: function() {
                        if (dump[a]) {
                       _.css('color', 'red');
						$(div).text('loading');
                        }
					},
					success: function(data) {
						$(div).text(data);
					},
				});
			};
			setTimeout(call, 1000);
		});