JSFiddle - React, Tailwind, and code Playground

by Ishank Dubey

HTML

<div class='offer' data-seq='1'>1</div>
<div class='offer' data-seq='2'>2</div>
<div class='rewardImg' data-seq='1'>11</div>
<div class='rewardImg' data-seq='2'>22</div>

CSS

.open {
  background-color: red;
}

JavaScript

document.addEventListener('mouseover', function(e) {
  if (e.target.className == 'offer') {
    var
      seq = '.rewardImg[data-seq="' + e.target.dataset.seq + '"]';
    console.log(seq);
    var selected = document.querySelector(seq);
    selected.classList.add("open");
  }
});


document.addEventListener('mouseout', function(e) {
  if (e.target.className == 'offer') {
    var
      seq = '.rewardImg[data-seq="' + e.target.dataset.seq + '"]';
    console.log(seq);
    var selected = document.querySelector(seq);
    selected.classList.remove("open");
  }
});