<script>

    const triggers = document.querySelectorAll('a');

    const highlight = document.createElement('span');

    highlight.classList.add('highlight');

    document.body.appendChild(highlight);

    function highlightLink() {

        // 返回值是一个DOMRect对象,DOMRect 对象包含了一组用于描述边框的只读属性——left、top、right和bottom，单位为像素。

        const linkCoords = this.getBoundingClientRect();

        const coords = {

            width: linkCoords.width,

            height: linkCoords.height,

            // 这里有个值得注意的点是,因为DOMRect是相对于视口的左上角位置而言的,所以需要加上滚动的scrollY或scrollX

            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(a => a.addEventListener('mouseenter', highlightLink));

</script>