rmion
diff --git a/Collapse file
‎22 - Follow Along Link Highlighter/index-START.html‎
Copy file name to clipboardExpand all lines: 22 - Follow Along Link Highlighter/index-START.html
+21-1Lines changed: 21 additions & 1 deletion b/Collapse file
‎22 - Follow Along Link Highlighter/index-START.html‎
Copy file name to clipboardExpand all lines: 22 - Follow Along Link Highlighter/index-START.html
+21-1Lines changed: 21 additions & 1 deletion
@@ -27,7 +27,27 @@
 
   <script>
     // 👀👀👀👀👀👀👀👀👀👀👀👀👀👀👀
+    const triggers = document.querySelectorAll('a');
+    const highlight = document.createElement('span');
+    highlight.classList.add('highlight');
+    document.body.append(highlight);
+
+    function highlightLink() {
+      const linkCoords = this.getBoundingClientRect();
+
+      const coords = {
+        width: linkCoords.width,
+        height: linkCoords.height,
+        top: linkCoords.top + window.scrollY,
+        left: linkCoords.left + window.scrollX
+      }
+      highlight.style.width = `${coords.width}px`;
+      highlight.style.height = `${coords.height}px`;
+      highlight.style.transform = `translate(${coords.left}px,${coords.top}px)`;
+    }
+    triggers.forEach((element) => {
+      element.addEventListener('mouseenter', highlightLink);
+    })
   </script>
 </body>
 </html>
-