Projenin demosu : Demo
Başlangıç dosyalarını bulabileceğiniz repom: js-30 | github
Amaç
Javascript kullanarak sitedeki tüm linkleri takip edip, herhangi birinin üzerine gelindiğinde sarı bir arka plan eklememizi sağlayacak bir span elementini doğru bir şekilde konumlandırmamız gerekiyor.
Çözümüm
<script>
// tüm a elementlerini seçelim
const links = document.querySelectorAll('a');
// vurgu elementini oluşturup body elementine ekleyelim
const highlight = document.createElement('span');
highlight.classList.add('highlight');
document.body.appendChild(highlight);
function highlightLink() {
// üzerine gelinen linkin sayfadaki konum bilgilerini alalım
const linkCoords = this.getBoundingClientRect();
const coords = {
width: linkCoords.width,
height: linkCoords.height,
top: linkCoords.top + window.scrollY,
left: linkCoords.left + window.scrollX
};
// vurguyu gösterdiğimiz span elementinin genişlik/ yükseklik değerini
// üzerine gelinen linkle aynı yapalım
// style.transform ile de önceki yerinden yeni yerine geçmesini sağlayalım
highlight.style.width = `${coords.width}px`;
highlight.style.height = `${coords.height}px`;
highlight.style.transform = `translate(${coords.left}px, ${coords.top}px)`;
}
// herhangi bir linkin üzerine fare ile gelindiğinde fonksiyon çalışacaktır
links.forEach(a => a.addEventListener('mouseenter', highlightLink));
</script>