JSFiddle - React, Tailwind, and code Playground

HTML

<div class="w1">
  <div class="block">Сюда надо навести</div>
</div>

<div class="w2">
  <div rel="block" class="hover">Текст появится</div>
</div>

<div class="w1">
  <div class="block">Сюда надо навести</div>
</div>

<div class="w2">
  <div rel="block" class="hover">Текст появится</div>
</div>

CSS

.block {
  background: #eee;
  padding: 2em;
}
.hover {
  display: none;
  background: green;
  padding: 2em;
}

JavaScript

function myMouseoverHandler(evt){
  evt.target.closest('.w1').nextElementSibling.querySelector('.hover').style.display = 'block'
}

var blocks = document.querySelectorAll('.block') // находим все блоки
var blocks = Array.prototype.slice.call(blocks) // преобразуем NodeList в массив
blocks.forEach(function(block) { // вешаем обработчик на каждый блок
	block.addEventListener('mouseover', myMouseoverHandler)
})

// такая-же фигня для mouseout
Array.prototype.forEach.call(document.querySelectorAll('.hover'), el=>el.addEventListener('mouseout', evt=>evt.target.style.display = 'none'))