步骤1

Question

在5月页面上，我列出了三个链接。我希望图像悬停在链接上时出现在光标位置。不幸的是，同一图像出现在所有三个链接上。我需要每个链接的图片都不同。

let attached = false;
 
let imageContainer = document.querySelector("#image");

const followMouse = (event) => {
  imageContainer.style.left = event.x + "px";
  imageContainer.style.top = event.y + "px";
}

function showImage() {
  if (!attached) {
    attached = true;
    imageContainer.style.display = "block";
    document.addEventListener("pointermove", followMouse);
  }
}

function hideImage() {
  attached = false;
  imageContainer.style.display = "";
  document.removeEventListener("pointermove", followMouse);
}

#image {
  position: fixed;
  display: none;
  pointer-events: none;
}

<a href="#"onpointerenter="showImage()" onpointerleave="hideImage()">COLUMNS</a>
                                              
<div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Mammisi_Philae2.JPG/340px-Mammisi_Philae2.JPG"></div>


<a href="#"onpointerenter="showImage()" onpointerleave="hideImage()">ROOF</a>
                                              
<div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Strasbourg_Aubette_03.jpg/384px-Strasbourg_Aubette_03.jpg"></div>

<a href="#"onpointerenter="showImage()" onpointerleave="hideImage()">ROOF</a>
                                              
<div id="image"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/126_rue_de_rivoli_Paris_2012_10.jpg/340px-126_rue_de_rivoli_Paris_2012_10.jpg"></div>

是否有一种简单的方法为每个链接显示不同的图片？是否可以通过为JS showImage函数的每个链接传递不同的图像src来实现？谢谢您的提前答复。

Answer 1

所有图像都具有相同的选择器（ID为#image）

我用过jQuery

$("div.image").hide();
  $(".img-link").hover(function() {
    $(this).children("img").css('display', 'inline');
  }, function() {
    $(this).children("img").css('display', 'none');
  });

img {
    position: fixed;
    display: none;
    pointer-events: none;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <a href="#"  class="img-link" >
    COLUMNS
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Mammisi_Philae2.JPG/340px-Mammisi_Philae2.JPG">
  </a>

  <a href="#" class="img-link">
    ROOF
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Strasbourg_Aubette_03.jpg/384px-Strasbourg_Aubette_03.jpg">
  </a>

  <a href="#" class="img-link">
    ROOF
    <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/126_rue_de_rivoli_Paris_2012_10.jpg/340px-126_rue_de_rivoli_Paris_2012_10.jpg">
  </a>

Answer 2

您可以通过重构代码的多个部分来实现这一目标：

步骤1

将图像移动到a标签内，以便您可以轻松地将图像链接到正确的链接：

<a href="#" onpointerenter="showImage()" onpointerleave="hideImage()">
  ROOF
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Strasbourg_Aubette_03.jpg/384px-Strasbourg_Aubette_03.jpg">
</a>

第2步

使用showImage和hideImage函数添加触发事件的元素以在javascript中对其进行操作：

步骤3

根据事件隐藏并在链接中显示图像。

您开始使用这种代码实现：

let attached = false;

const getElmtImage = (elmt) => {
  return elmt.querySelector("img")
}

const followMouse = (elmt, event) => {
  elmt.style.left = event.x + "px";
  elmt.style.top = event.y + "px";
}

function showImage(elmt) {
  const image = getElmtImage(elmt)
  if (!attached) {
    attached = true;
    image.style.display = "block";
    document.addEventListener("pointermove", function(event) {
      followMouse(image, event)
    });
  }
}

function hideImage(elmt) {
  const image = getElmtImage(elmt)
  attached = false;
  image.style.display = "none";
  document.removeEventListener("pointermove", followMouse);
}

img {
  position: fixed;
  display: none;
  pointer-events: none;
}

<a href="#" onpointerenter="showImage(this)" onpointerleave="hideImage(this)">
  COLUMNS
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/33/Mammisi_Philae2.JPG/340px-Mammisi_Philae2.JPG">
</a>

<a href="#" onpointerenter="showImage(this)" onpointerleave="hideImage(this)">
  ROOF
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/4/42/Strasbourg_Aubette_03.jpg/384px-Strasbourg_Aubette_03.jpg">
</a>

<a href="#" onpointerenter="showImage(this)" onpointerleave="hideImage(this)">
  ROOF
  <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/1/12/126_rue_de_rivoli_Paris_2012_10.jpg/340px-126_rue_de_rivoli_Paris_2012_10.jpg">
</a>

在鼠标悬停在链接上显示图片

2 个答案:

步骤1

第2步

步骤3