// Selecteer alle gradiënt-div elementen const gradientDivs = document.querySelectorAll('.gradient-div'); // Loop door elke div en voeg event listeners toe gradientDivs.forEach(div => { div.addEventListener('mousemove', function(event) { // Verkrijg de grootte en positie van de div const { width, height, top, left } = div.getBoundingClientRect(); // Muispositie ten opzichte van de div berekenen const x = event.clientX - links; const y = event.clientY - top; // Bereken het brandpunt van het kleurverloop op basis van de muispositie const xPercent = (x / width) * 100; const yPercent = (y / hoogte) * 100; // Een dynamisch radiaal verloop instellen op basis van de muispositie div.style.background = `radial-gradient(circle at ${xPercent}% ${yPercent}%,#C9E5FC, #FFFF)`; }); // Het verloop resetten wanneer de muis de div verlaat div.addEventListener('mouseleave', function() { div.style.background = `linear-gradient(135deg, #FFFF00 0%, #FFFF00 100%)`; }); });