懸停時自定義鼠標動畫

Question

嗨，我一直在尋求實現鼠標懸停在鏈接上時進行更改的方法，並且還沒有遇到有關如何實現此操作的指南。

我一直在尋找類似以下網站的內容： https : //www.niccolomiranda.com/about，當您將鼠標懸停在鏈接上時，它會增加圓圈的面積。

如果有人幫我解決這個問題，將不勝感激！

Answer 1

希望這對您有所幫助：

 $(document).mousemove(function(e) { $('.cursor').eq(0).css({ left: e.clientX, top: e.clientY }); setTimeout(function() { $('.cursor').eq(1).css({ left: e.clientX, top: e.clientY }); }, 100); }) $("a").on("mouseenter", function () { $('.cursor-a').addClass("active"); $('.cursor-v').addClass("active"); }); $("a").on("mouseleave", function () { $('.cursor-a').removeClass("active"); $('.cursor-v').removeClass("active"); }); 

 * { cursor: none; } body { background: #000; } .cont { padding: 40px; } .link { color:#fff; text-decoration:none; display:block; padding-top:20px; } .cursor { position: fixed; height: 10px; width: 10px; border-radius: 50%; z-index: 1000; } .cursor { position: fixed; height: 10px; width: 10px; border-radius: 50%; z-index: 1000; } .cursor-a { position: fixed; background-color: #5C6AFF; width: 10px; height: 10px; border-radius: 100%; z-index: 10000; transition: 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 100000000; transform: scale(1); } .cursor-a.active { opacity: 0.5; transform: scale(0); } .cursor-b { position: fixed; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; user-select: none; pointer-events: none; z-index: 10000000; transform: translate(-14px, -14px); } .cursor-v { width: 38px; transition: 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform, 0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity; height: 38px; border-radius: 100%; border-style: solid; border-width: 1px; border-color: white; } .cursor-v.active { background-color: rgba(255, 255, 255, 0.1); opacity: 0.8; transform: scale(2); border:none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="cursor cursor-a"></div> <div class="cursor cursor-b"><div class="cursor-v"></div></div> <div class="cont"> <a class="link" href="#">custom link, hover me!</a> </div> 

魔力