JS30 Challenge Day 22 - Highlight that Follows Mouse Pointer

Github Link

Run a function on mouseenter event on any ‘a’ element

element.getBoundingClientRect();

gives us the co-ordinates, width and height of the current element

Added the following code extra:

initialNav=document.querySelector('li').firstChild;

    initialcoords=initialNav.getBoundingClientRect();

    console.log("initial nav", initialNav);

    start={

      left:initialcoords.left+window.scrollX,

      top:initialcoords.top+window.scrollY

    };

    hilite.style.transform=`translate(${start.left}px,${start.top}px)`;

    triggers.forEach(thing=>thing.addEventListener('mouseenter',lightitup));

The above code deals with the position of the highlight first, before it acquires any height, width or offset., 

I have set the initial position to the first Nav element.

By default the initial position is at the top left corner on the screen.

It doesn’t look nice that way because when you select the first highlight, it drags the highlight from the corner.