JSFiddle - React, Tailwind, and code Playground

by jt3k

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="list">
    <div class="arrow">lalala</div>
    <div class="item">Lorem ipsum dolor.</div>
    <div class="item">Maiores, nostrum facilis.</div>
    <div class="item">Nobis, eligendi, consectetur!</div>
    <div class="item">A, aperiam, esse.</div>
    <div class="item">Atque, hic, quasi.</div>
  </div>
  
  <div id="out"></div>
</body>
</html>

CSS

.list {
  position: relative;
  
}

.item {
  height: 30px;
}

.arrow {
  transition:1s;
  position: absolute;
  height: 30px;
  top: 0;
  left: 0;
  width: 100%;
  background-color: lime;
}

JavaScript

const list = document.querySelector('.list');
const arrow = document.querySelector('.arrow');

list.onmouseover = e => {
  arrow.style.top = `${e.target.offsetTop}px`;
  debugger;
};