如何解决Wordpress Divi - 插入动画光标代码的问题
这是我的新网站:www.talas.me
这就是我要复制的内容:Awesome Link Hover Effect / Animated 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>
某处有问题,我不知道在哪里。正如您现在看到的(当我正确复制此代码时)我们在我的网站上看不到光标。
谁能告诉我是什么问题以及如何解决? 这对我的网站非常重要,因为网站将是黑白的,而光标效果对我来说非常重要。
谢谢!
解决方法
据我所知,Divi 主题在主题设置中提供了一个选项,我们可以在其中添加自定义 jQuery 或 javascript,这样您就可以直接在那里添加 以下链接可以帮助您解决问题 https://divi.space/tutorials/how-to-add-javascript-and-jquery-to-divi/
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。