使用 jquery 在悬停时添加随机图像

Question

很难修改HTML和CSS，除了在div中添加class和ID。那么为什么我要尝试使用 JS Jquery.

来处理它

当我将鼠标悬停在 div 中的图像上时，我想随机显示 GIF。

当鼠标移出时，效果应该消失，以便再次看到原始图像。

（在这个例子中，目标是让 gif 随机出现。）

这是我一直在处理的代码。

const ImgLinks = [
"https://media.giphy.com/media/tJ1jipvvMs4r7xuZnI/giphy.gif",
"https://media.giphy.com/media/XFpIo4jKuUrjQHYHeq/giphy.gif",
"https://media.giphy.com/media/uxunn6z4qKrGsND3II/giphy.gif",
"https://media.giphy.com/media/XxRl7rbKSFvXEFoNzv/giphy.gif"
]; //sources are examples.
    
function getRandHoverGif() {
  const index = Math.floor(Math.random() * ImgLinks.length);
  return ImgLinks[index];
}

$("#hover-ani").hover(
  function() {

我不知道如何完成悬停功能

Answer 1

悬停时设置图像 src，悬停时移除 src。在图像上应用一些 CSS 以获得所需的输出。

示例：

const ImgLinks = [
  "https://media.giphy.com/media/tJ1jipvvMs4r7xuZnI/giphy.gif",
  "https://media.giphy.com/media/XFpIo4jKuUrjQHYHeq/giphy.gif",
  "https://media.giphy.com/media/uxunn6z4qKrGsND3II/giphy.gif",
  "https://media.giphy.com/media/XxRl7rbKSFvXEFoNzv/giphy.gif"
]; //sources are examples.

function getRandHoverGif() {
  const index = Math.floor(Math.random() * ImgLinks.length);
  return ImgLinks[index];
}

$("#hover-ani").hover(
  function() {
    $("#img2").attr("src", getRandHoverGif());
  },
  function() {
    $("#img2").attr("src", "");
  }
);

#img1 {
  background-color: transparent;
  background-image: url("https://i.stack.imgur.com/XZ4V5.jpg");
  background-repeat: no-repeat;
  width: 600px;
  height: 400px;
  position: absolute;
  z-index: 1;
}

#img2 {
  position: absolute;
  top: 25px;
  left: 25px;
  z-index: 2;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hover-ani">
  <img id="img1"></img>
  <img id="img2"></img>
</div>

注意：您可以根据您的要求（gif 位置）编辑（自定义）您的 CSS。

使用 jquery 在悬停时添加随机图像

Add random image on hover using jquery

jquery

random

hover

jquery-hover