.cursor, .cursor2, .cursor3{ position: fixed; border-radius: 50%; transform: translateX(-50%) translateY(-50%); pointer-events: none; left: -100px; top: 50%; mix-blend-mode: difference; -webkit-transition: all 300ms linear; transition: all 300ms linear; } .cursor{ background-color: #fff; height: 0; width: 0; z-index: 99999; } .cursor2,.cursor3{ height: 36px; width: 36px; z-index:99998; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out } .cursor2.hover, .cursor3.hover{ -webkit-transform:scale(2) translateX(-25%) translateY(-25%); transform:scale(2) translateX(-25%) translateY(-25%); border:none } .cursor2{ border: 2px solid #fff; box-shadow: 0 0 22px rgba(255, 255, 255, 0.6); } .cursor2.hover{ background: rgba(255,255,255,1); box-shadow: 0 0 12px rgba(255, 255, 255, 0.2); } @media screen and (max-width: 1200px){ .cursor,.cursor2,.cursor3{ display: none } } //Page cursors document.getElementsByTagName("body")[0].addEventListener("mousemove", function(n) { t.style.left = (n.clientX + 10) + "px", t.style.top = (n.clientY + 10) + "px", e.style.left = (n.clientX + 10) + "px", e.style.top = (n.clientY + 10) + "px", ii.style.left = (n.clientX + 10) + "px", ii.style.top = (n.clientY + 10) + "px"; }); jQuery(document).on("mouseover","a",function() { e.classList.add("hover"); ii.classList.add("hover"); }); jQuery(document).on("mouseout","a",function() { e.classList.remove("hover"), ii.classList.remove("hover") }); var t = document.getElementById("cursor"), e = document.getElementById("cursor2"), ii = document.getElementById("cursor3"); function n(t) { e.classList.add("hover"), ii.classList.add("hover") } function s(t) { e.classList.remove("hover"), ii.classList.remove("hover") }