我正在做我的项目,我想在这个wordpress模板上做鼠标效果,http://preview.themeforest.net/item/consultio-consulting-business-wordpress/full_screen_preview/25376496?_ga=2.61545708.1311804999.1617452015-579954703.1617357573
但在我的项目中我有:
null
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>
null
好的,你能再给我解释一下吗,因为我在这里没有看到react,如果你在react中这样做,那就太不对了,你应该考虑阅读文档。