// Alle gradient-div-Elemente auswählen const gradientDivs = document.querySelectorAll('.gradient-div'); // Schleife durch jedes div und Hinzufügen von Ereignis-Listenern gradientDivs.forEach(div => { div.addEventListener('mousemove', function(event) { // Größe und Position des Divs ermitteln const { width, height, top, left } = div.getBoundingClientRect(); // Berechnung der Mausposition relativ zum div const x = event.clientX - left; const y = event.clientY - top; // Berechne den Fokuspunkt des Farbverlaufs anhand der Mausposition const xPercent = (x / Breite) * 100; const yPercent = (y / Höhe) * 100; // Einstellen eines dynamischen radialen Farbverlaufs basierend auf der Mausposition div.style.background = `radial-gradient(circle at ${xPercent}% ${yPercent}%,#C9E5FC, #FFFFFF)`; }); // Zurücksetzen des Farbverlaufs, wenn die Maus das div verlässt div.addEventListener('mouseleave', function() { div.style.background = `linear-gradient(135deg, #FFFFFF00 0%, #FFFFFF00 100%)`; }); });