JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="1" class="item">
 Item 1
</div>
<div id="2" class="item">
 Item 2
</div>
<div id="link">
  <a href="#" class="link" onMouseEnter="mouseEnt('1')">Link1</a>
  <a href="#" class="link" onMouseEnter="mouseEnt('2')">Link2</a>
</div>

CSS

.item {
  width:100px;
  height: 100px;
  border: 1px solid #000; 
  position: relative;
  margin-left: 10px;
  float: left;
}
.item:hover {
  background-color: #000;
}
#link {
 top: 150px;
 position: absolute;
}

JavaScript

function mouseEnt(id) {
	$('#' + id).trigger('hover');
}