each day build day!/Day 24/index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Text Highlight 🔆 </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <nav>
        <ul class="menu">
          <li><a href="">Home</a></li>
          <li><a href="">Order Status</a></li>
          <li><a href="">Tweets</a></li>
          <li><a href="">Read Our History</a></li>
          <li><a href="">Contact Us</a></li>
        </ul>
      </nav>
  
      <div class="wrapper">
        <p>Lorem ipsum dolor sit amet, <a href="">consectetur</a> adipisicing elit. Est <a href="">explicabo</a> unde natus necessitatibus esse obcaecati distinctio, aut itaque, qui vitae!</p>
        <p>Aspernatur sapiente quae sint <a href="">soluta</a> modi, atque praesentium laborum pariatur earum <a href="">quaerat</a> cupiditate consequuntur facilis ullam dignissimos, aperiam quam veniam.</p>
        <p>Cum ipsam quod, incidunt sit ex <a href="">tempore</a> placeat maxime <a href="">corrupti</a> possimus <a href="">veritatis</a> ipsum fugit recusandae est doloremque? Hic, <a href="">quibusdam</a>, nulla.</p>
        <p>Esse quibusdam, ad, ducimus cupiditate <a href="">nulla</a>, quae magni odit <a href="">totam</a> ut consequatur eveniet sunt quam provident sapiente dicta neque quod.</p>
        <p>Aliquam <a href="">dicta</a> sequi culpa fugiat <a href="">consequuntur</a> pariatur optio ad minima, maxime <a href="">odio</a>, distinctio magni impedit tempore enim repellendus <a href="">repudiandae</a> quas!</p>
      </div>
  

    <script>
        const allLinks = document.querySelectorAll('a');
        const highlight = document.createElement('span');
        highlight.classList.add('highlight');
        document.body.appendChild(highlight);

        function highlightLink(){
            //get the hight and width of the target element
            const targetData = this.getBoundingClientRect();
            console.log(targetData)
            
            //get the absolute position of element from top & left

            //add the scrollY units to it
            const scrollYBy = window.scrollY;
            const scrollXBy = window.scrollX;
            const pointerCoords = {
                height:targetData.height,
                width:targetData.width,
                top:targetData.top + scrollYBy,
                left:targetData.left + scrollXBy
            }

            //finally the apply the highlight class
            highlight.style.width = `${pointerCoords.width}px`;
            highlight.style.height = `${pointerCoords.height}px`;
            highlight.style.transform = `translate(${pointerCoords.left}px, ${pointerCoords.top}px)`; 
        }

        allLinks.forEach(link => link.addEventListener('mouseenter',highlightLink))
    </script>
</body>
</html>