javascript - 使用 JS JQUERY 随机切换 CSS 标签

Question

我正在制作一个随机图像，当鼠标进入带有testarea类的 div 时会发生变化。

鼠标进入Div，随机切换图像的'off-cursor'标签。

我提到了几个网站。

但是，我是 JS 和 JQUERY 初学者。我不知道如何完成它。

如果您能帮助我，我将不胜感激。

const Cursor = document.querySelectorAll('.cursor');

function getRdCursor() {
  const index = Math.floor(Math.random() * Cursor.length);
  return Cursor[index];
};
  
  $(function () {
  $(".testarea").mousemove(function (e) {
    $(".cursor").show().css({
      "left": e.clientX,
      "top": e.clientY
    });
  }).mouseout(function () {
    $(".cursor").hide();
  });
});

.testarea {
  border: 1px dashed #ccc;
  height: 100px;
  margin: 100px 100px 100px 100px;
  cursor: none;

}
.cursor {
  position: absolute;
  width: 5%;
  height: auto;
  left: -100px;
  cursor: none;
  pointer-events: none;
  transform: translate(-50%,-50%);
}

.off-cursor {
  visibility: hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<img src="https://media.giphy.com/media/tJ1jipvvMs4r7xuZnI/giphy.gif" alt="Cursor" class="cursor" />
<img src="https://media.giphy.com/media/XFpIo4jKuUrjQHYHeq/giphy.gif" alt="Cursor" class="cursor off-cursor" />
<img src="https://media.giphy.com/media/uxunn6z4qKrGsND3II/giphy.gif" alt="Cursor" class="cursor off-cursor" />
<img src="https://media.giphy.com/media/XxRl7rbKSFvXEFoNzv/giphy.gif" alt="Cursor" class="cursor off-cursor" />

<div class="testarea"></div>
<div class="testarea"></div>
<div class="testarea"></div>
<div class="testarea"></div>

标签： javascripthtmljquerycsscursor