Wordpress Divi - 插入动画 Cursor 代码的问题

Question

这是我的新网站： www.talas.me

这就是我要复制的内容： Awesome Link Hover 效果/动画 Cursor

 (function () { const link = document.querySelectorAll('nav >.hover-this'); const cursor = document.querySelector('.cursor'); const animateit = function (e) { const span = this.querySelector('span'); const { offsetX: x, offsetY: y } = e, { offsetWidth: width, offsetHeight: height } = this, move = 25, xMove = x / width * (move * 2) - move, yMove = y / height * (move * 2) - move; span.style.transform = `translate(${xMove}px, ${yMove}px)`; if (e.type === 'mouseleave') span.style.transform = ''; }; const editCursor = e => { const { clientX: x, clientY: y } = e; cursor.style.left = x + 'px'; cursor.style.top = y + 'px'; }; link.forEach(b => b.addEventListener('mousemove', animateit)); link.forEach(b => b.addEventListener('mouseleave', animateit)); window.addEventListener('mousemove', editCursor); })();

 html, body { margin: 0; padding: 0; cursor: none; }.nav-wrapper { width: 100%; height: 100vh; background: #161616; } nav { width: 100%; margin: 0 auto; text-align: center; position: absolute; top: 50%; }.hover-this { transition: all 0.3s ease; } span { display: inline-block; font-family: "Monument Extended"; font-weight: 300; color: #fff; font-size: 36px; text-transform: uppercase; pointer-events: none; transition: transform 0.1s linear; }.cursor { pointer-events: none; position: fixed; padding: 0.3rem; background-color: #fff; border-radius: 50%; mix-blend-mode: difference; transition: transform 0.3s ease; }.hover-this:hover ~.cursor { transform: translate(-50%, -50%) scale(8); } @media(min-width: 900px) { nav { display: flex; justify-content: space-around; } } @media(max-width: 900px) { nav { top: 30%; }.hover-this { width: 100%; padding: 20px 0; display: inline-block; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="nav-wrapper"> <nav> <a href="#" class="hover-this"><span>Home</span></a> <a href="#" class="hover-this"><span>Our Story</span></a> <a href="#" class="hover-this"><span>Studio</span></a> <a href="#" class="hover-this"><span>Contact</span></a> <div class="cursor"></div> </nav> </div>

某处有问题，我不知道在哪里。 正如您现在所看到的（当我正确复制此代码时）我们在我的网站上看不到 cursor。

有人可以告诉我问题是什么以及如何解决吗？ 这对我的站点非常重要，因为该站点将是黑白的，而这个 cursor 效果对我来说非常重要。

谢谢！

Answer 1

据我所知，Divi 主题在主题设置中提供了一个选项，我们可以在其中添加自定义 jQuery 或 javascript，因此您可以直接在此处添加以下链接可以帮助您解决问题Z5E056C500A1C4B6A7110B50D807/BADE5：//divspace/tutorials/how-Z添加-javascript-and-jquery-to-divi/