javascript - onmousemouve 工作，但悬停效果和点击在 reatcjs 应用程序中不起作用

Question

我在做我的项目，我想在这个wordpress模板上做鼠标效果，http://preview.themeforest.net/item/consultio-consulting-business-wordpress/full_screen_preview/25376496?_ga=2.61545708.1311804999.1617452015- 579954703.1617357573

但在我的项目中，我有：

let circle = document.getElementById("ct-mouse-move"); 

const onMouseMove = (e) =>{
    circle.style.left = e.pageX + "px";
    circle.style.top = e.pageY + "px";
};
document.addEventListener("mousemove", onMouseMove)

#ct-mouse-move {
    position: fixed;
    z-index: 9999;
}



#ct-mouse-move .circle-cursor--outer {
    width: 30px;
    height: 30px;
    border: 1px solid rgba(14, 128, 246, 0.5);
    -webkit-border-radius: 30px;
    -khtml-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    border-radius: 30px;
    margin-top: -17px;
    margin-left: -16px;
    -webkit-transition: all 50ms linear 0ms;
    -khtml-transition: all 50ms linear 0ms;
    -moz-transition: all 50ms linear 0ms;
    -ms-transition: all 50ms linear 0ms;
    -o-transition: all 50ms linear 0ms;
    transition: all 50ms linear 0ms;
}

#ct-mouse-move .circle-cursor--inner {
    width: 6px;
    height: 6px;
    background-color: #0e80f6;
    -webkit-border-radius: 6px;
    -khtml-border-radius: 6px;
    -moz-border-radius: 6px;
    -ms-border-radius: 6px;
    -o-border-radius: 6px;
    border-radius: 6px;
    margin-top: -18px;
    margin-left: -4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="ct-mouse-move" style="top: 0px; left: 0px;">
    <div class="circle-cursor circle-cursor--outer"></div>
    <div class="circle-cursor circle-cursor--inner"></div>
</div>

所以 onmousemouve 工作，但悬停效果和点击操作不起作用我该如何解决我的问题？

标签： javascripthtmljquerycss

Answer 1

好的，您能否再解释一下，因为我在这里看不到任何反应，如果您在反应中这样做，那就太错误了，您应该考虑阅读文档。