Ciao a tutti,
sto smanettando un po in CSS e JS per customizzare il cursore del mouse nella finestra browser.
Praticamento imposto cursor:none sul body e poi creo un elemento html .cursor al quale assegno le coordinate X e Y tramite:
Per aggiugnere un effetto quando il cursore arriva sopra ad un link, ho implementato la funzione precedente con la funzione isColliding:codice:document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;") }) document.addEventListener('click', () => { cursor.classList.add("cursor_expanded"); setTimeout(() => { cursor.classList.remove("cursor_expanded"); }, 300) })
il problema è che mi fa l'effetto solo sulla prima .expand del documento, non sulle altre. COME MAI?codice:let isColliding = function (div1, div2) { let d1Offset = div1.offset(); let d1Height = div1.outerHeight(true); let d1Width = div1.outerWidth(true); let d1Top = d1Offset.top + d1Height; let d1Left = d1Offset.left + d1Width; let d2Offset = div2.offset(); let d2Height = div2.outerHeight(true); let d2Width = div2.outerWidth(true); let d2Top = d2Offset.top + d2Height; let d2Left = d2Offset.left + d2Width; return !(d1Top < d2Offset.top || d1Offset.top > d2Top || d1Left < d2Offset.left || d1Offset.left > d2Left); }; document.addEventListener('mousemove', e => { cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;") if (isColliding($('.expand'),$('.cursor'))==true){ $('.cursor').addClass('cursor_expanded'); } else { $('.cursor').removeClass('cursor_expanded'); } }) document.addEventListener('click', () => { cursor.classList.add("cursor_expanded"); setTimeout(() => { cursor.classList.remove("cursor_expanded"); }, 300) })
Cioè il COME MAI lo capisco: alla funzione viene passata la classe .expand e lui becca la prima. La odmanda giusta è: COME FACCIO a passargli l elemento che si trova sotto il mouse?


Rispondi quotando