还在苦苦挣扎..。为什么我不能让淡入淡出鼠标工作？

<div class="cursor"></div>

.cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  transition: opacity 0.3s ease;
  pointer-events: none; /* 禁止鼠标点击事件，以便不影响页面的正常交互 */
}

document.addEventListener("mousemove", function(event) {
  var cursor = document.querySelector(".cursor");
  cursor.style.left = event.clientX + "px";
  cursor.style.top = event.clientY + "px";
});

document.addEventListener("mouseover", function() {
  var cursor = document.querySelector(".cursor");
  cursor.style.opacity = 1;
});

document.addEventListener("mouseout", function() {
  var cursor = document.querySelector(".cursor");
  cursor.style.opacity = 0;
});