javascript演習 〜22日目/３０日

覚えたこと

ホバーで白い背景を作る方法
まず背景の要素を作って、

const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.append(highlight);

ホバーするa要素を取得する

const triggers = document.querySelectorAll('a');
triggers.forEach(a => a.addEventListener('mouseenter',hightlightLink))

ホバーのターゲットの位置を取得して、スタイルに当てる

function hightlightLink(){
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)`;
}

参考