如何解决具有悬停效果的圆形光标
我想创建一个自定义圆形光标,它会随着悬停在我页面上的每个链接而增长。 我创建了下面的代码,但悬停效果不会持续。 它并没有真正显示出来,我不知道为什么,我想我的 javascript 很糟糕...
我尝试只使用 javascript 语言并保持简单。
如果您有解决方案,那就太好了!
谢谢!
var circle = document.querySelector(".cr");
var dot = document.querySelector(".dot");
var body = document.querySelector("body");
//var link = document.querySelector("a");
var links = Array.from(document.querySelectorAll("a"));
body.addEventListener("mousemove",function(e) {
let x = e.clientX;
let y = e.clientY;
var valX = x - 20;
var valY = y - 20;
var dotX = x + 7;
var dotY = y + 7;
circle.style.left = valX + 'px';
circle.style.top = valY + 'px';
dot.style.left = dotX + 'px';
dot.style.top = dotY + 'px';
});
//link.addEventListener("mouSEOver",function( event ) {
//circle.style.transform = 'scale(1.5)';
//});
links.forEach( item => {
item.addEventListener("mouseenter",() => {
circle.classList.add("grow");
});
item.addEventListener("mouseleave",() => {
circle.classList.remove("grow");
});
});
@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;700&display=swap');
*,*::before,*::after {
Box-sizing: border-Box;
}
body {
position: relative;
padding: 0px;
margin: 0px;
outline: 0;
width: 100%;
height: 600px;
background-color: rgba(244,230,150,1);
cursor: none;
color: #e56b6f;
}
.cr {
position: absolute;
left: -50px;
top: -50px;
width: 60px;
height: 60px;
background: transparent;
border: 1px solid #000;
border-radius: 100%;
transition: all 80ms ease;
}
.dot {
position: absolute;
left: 0px;
top: 0px;
width: 5px;
height: 5px;
background: black;
//border: 1px solid #000;
border-radius: 100%;
transition: all 80ms ease;
}
main {
display: flex;
justify-content: flex-end;
padding: 50px
}
.wrapper {
max-width: 600px;
}
h1 {
font-family: 'Red Rose',cursive;
font-size: 60px;
line-height: 60px;
text-align: right;
}
a {
color: #e56b6f;
text-decoration: none;
}
.grow {
transform: scale(1.5);
}
<main>
<div class="cr"></div>
<div class="dot"></div>
<div class="wrapper">
<h1>simple circle cursor with <a href="#">hover</a> effect</h1>
</div>
</main>
解决方法
将 pointer-events: none
添加到 .cr
和 .dot
- 由于圆圈和点位于链接“上方”,鼠标进入/离开不会触发属性
另外 ... 将 cursor:none 添加到 a
否则,当您将鼠标悬停在链接上时会出现指针
var circle = document.querySelector(".cr");
var dot = document.querySelector(".dot");
var body = document.querySelector("body");
//var link = document.querySelector("a");
var links = Array.from(document.querySelectorAll("a"));
body.addEventListener("mousemove",function(e) {
let x = e.clientX;
let y = e.clientY;
var valX = x - 20;
var valY = y - 20;
var dotX = x + 7;
var dotY = y + 7;
circle.style.left = valX + 'px';
circle.style.top = valY + 'px';
dot.style.left = dotX + 'px';
dot.style.top = dotY + 'px';
});
//link.addEventListener("mouseover",function( event ) {
//circle.style.transform = 'scale(1.5)';
//});
links.forEach( item => {
item.addEventListener("mouseenter",() => {
circle.classList.add("grow");
});
item.addEventListener("mouseleave",() => {
circle.classList.remove("grow");
});
});
@import url('https://fonts.googleapis.com/css2?family=Red+Rose:wght@300;700&display=swap');
*,*::before,*::after {
box-sizing: border-box;
}
body {
position: relative;
padding: 0px;
margin: 0px;
outline: 0;
width: 100%;
height: 600px;
background-color: rgba(244,230,150,1);
cursor: none;
color: #e56b6f;
}
.cr {
position: absolute;
left: -50px;
top: -50px;
width: 60px;
height: 60px;
background: transparent;
border: 1px solid #000;
border-radius: 100%;
transition: all 80ms ease;
pointer-events: none;
}
.dot {
position: absolute;
left: 0px;
top: 0px;
width: 5px;
height: 5px;
background: black;
//border: 1px solid #000;
border-radius: 100%;
transition: all 80ms ease;
pointer-events: none;
}
main {
display: flex;
justify-content: flex-end;
padding: 50px
}
.wrapper {
max-width: 600px;
}
h1 {
font-family: 'Red Rose',cursive;
font-size: 60px;
line-height: 60px;
text-align: right;
}
a {
color: #e56b6f;
text-decoration: none;
cursor:none;
}
.grow {
transform: scale(1.5);
}
<main>
<div class="cr"></div>
<div class="dot"></div>
<div class="wrapper">
<h1>simple circle cursor with <a href="#">hover</a> effect</h1>
</div>
</main>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。