小编Dre*_*ker的帖子

我试图在反应中得到这个光标效果

我是反应新手,我正在尝试在我的登陆页面上获得此光标效果,但如果不使用 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)

jquery mouseevent reactjs

2
推荐指数
1
解决办法
9945
查看次数

标签 统计

jquery ×1

mouseevent ×1

reactjs ×1