我是反应新手,我正在尝试在我的登陆页面上获得此光标效果,但如果不使用 jquery 就无法做到这一点...我已经查看过 React SyntheticEvents,但我不知道如何正确使用它们。
这是我想要达到的效果,但在反应中:
$(document)
.mousemove(function(e) {
$('.cursor')
.eq(0)
.css({
left: e.pageX,
top: e.pageY
});
setTimeout(function() {
$('.cursor')
.eq(1)
.css({
left: e.pageX,
top: e.pageY
});
}, 100);
})Run Code Online (Sandbox Code Playgroud)
body{
background:black;
}
h1{
color:white;
}
* {
cursor: none;
}
.cursor {
position: fixed;
height: 10px;
width: 10px;
border-radius: 50%;
transform: translateX(-50%) translateY(-50%);
pointer-events:none;
}
.cursors .cursor:nth-child(1) {
background-color: #3a26fd;
z-index: 100002;
}
.cursors .cursor:nth-child(2) {
background-color: #f3f3f3;
z-index: 100001;
height: 9px;
width: 9px;
}Run Code Online (Sandbox Code Playgroud)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div …Run Code Online (Sandbox Code Playgroud)