JSFiddle - React, Tailwind, and code Playground

by tr_santi

HTML

<table id="task-list-main-table">
  <tr>
    <td>test row</td>
  </tr>
  <tr>
    <td>test row</td>
  </tr>
  <tr>
    <td>test row</td>
  </tr>
  <tr>
    <td>test row</td>
  </tr>
</table>
<span class="task-tools-wrap" onclick="doSomething">tools</span>

CSS

.myhover {
  background-color: lightyellow;
}

.task-tools-wrap {
  position: absolute;
  left: 80px;
  cursor: pointer;
  z-index: 1;
}

#task-list-main-table {
  width: 300px;
}

#task-list-main-table td {
  border: 1px solid black;
}

JavaScript

//Change this value to desired element
var hoverElement = "td";

//Change this value to the class you'd like to add when hovering
var addClass = "myhover";

function getOffset(el) {
  var _x = 0;
  var _y = 0;
  while (el && !isNaN(el.offsetLeft) && !isNaN(el.offsetTop)) {
    _x += el.offsetLeft - el.scrollLeft;
    _y += el.offsetTop - el.scrollTop;
    el = el.offsetParent;
  }
  return {
    top: _y,
    left: _x
  };
}

function hasClass(element, cls) {
  return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
}

function overlapListener(element, x, y, classToAdd) {
  var eTop = getOffset(element).top;
  var eLeft = getOffset(element).left;
  var eBottom = eTop + element.clientHeight;
  var eRight = eLeft + element.clientWidth;
  if (x <= eRight && x >= eLeft && y <= eBottom && y >= eTop) {
    if (!hasClass(element, classToAdd)) {
      element.className = classToAdd;
    }
  } else {
    if (hasClass(element, classToAdd)) {
      element.className = "";
    }
  }
}

var elementList = document.querySelectorAll(hoverElement);

document.onmousemove = function(e) {
  [].forEach.call(elementList, function(b) {
    overlapListener(b, e.clientX, e.clientY, addClass)
  });
};

$(document).ready(function() {
  $('#task-list-main-table').on('mouseenter', 'tr', function() {
    $('.task-tools-wrap').css('top', $(this).offset().top);
  });
});