我试图开发一个画廊wherin鼠标悬停显示一个图像，可以点击打开。我得到了一切工作，但一旦我添加了链接，事情变得有点混乱。不，它只显示最后一个瓷砖。下面是代码供您参考：
HTML：

<div id="gallery">

    <a href="#"><div class="tile">
      <img src="pictures/6.jpg" />
    </div></a>

    <a href="#"><div class="tile">
      <img src="pictures/10.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/21.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/22.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/23.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/28.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/34.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/35.jpg" />
    </div></a>
    
    <a href="#"><div class="tile">
      <img src="pictures/84.jpg" />
    </div></a>

</div>

CSS：

body {
    background-color: rgb(10, 10, 10);
    height: 100vh;  
    margin: 0px;
    overflow: hidden;
  }

  #gallery {
    height: 140vmax;
    width: 140vmax;  
    position: absolute;
  }

  .tile {
    border-radius: 1vmax;
    position: absolute;
    transition: transform 800ms ease;
  }
  
  .tile:hover {
    transform: scale(1.1);
  }

  
.tile:hover > img {
    opacity: 1;
    transform: scale(1.01);
  }

  
.tile > img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: inherit;
    opacity: 0;
    transition: opacity 800ms ease,
      transform 800ms ease;
  }
  
  .tile:nth-child(1) {
    background-color: rgb(255, 238, 88);
    height: 14%;
    width: 20%;
    left: 5%;
    top: 5%;
  }
  
  .tile:nth-child(2) {
    background-color: rgb(66, 165, 245);
    height: 24%;
    width: 14%;
    left: 42%;
    top: 12%;
  }
  
  .tile:nth-child(3) {
    background-color: rgb(239, 83, 80);
    height: 18%;
    width: 16%;
    left: 12%;
    top: 34%;
  }
  
  .tile:nth-child(4) {
    background-color: rgb(102, 187, 106);
    height: 14%;
    width: 12%;
    left: 45%;
    top: 48%;
  }
  
  .tile:nth-child(5) {
    background-color: rgb(171, 71, 188);
    height: 16%;
    width: 32%;
    left: 8%;
    top: 70%;
  }
  
  .tile:nth-child(6) {
    background-color: rgb(255, 167, 38);
    height: 24%;
    width: 24%;
    left: 68%;
    top: 8%;
  }
  
  .tile:nth-child(7) {
    background-color: rgb(63, 81, 181);
    height: 16%;
    width: 20%;
    left: 50%;
    top: 74%;
  }
  
  .tile:nth-child(8) {
    background-color: rgb(141, 110, 99);
    height: 24%;
    width: 18%;
    left: 72%;
    top: 42%;
  }
  
  .tile:nth-child(9) {
    background-color: rgb(250, 250, 250);
    height: 10%;
    width: 8%;
    left: 84%;
    top: 84%;
  }
  
  a {
    text-decoration: none;
    color: white;
  }

JS：

document.addEventListener("DOMContentLoaded", function(event) {

const gallery = document.getElementById("gallery");

window.onmousemove = e => {
  const mouseX = e.clientX,
        mouseY = e.clientY;
  
  const xDecimal = mouseX / window.innerWidth,
        yDecimal = mouseY / window.innerHeight;
  
  const maxX = gallery.offsetWidth - window.innerWidth,
        maxY = gallery.offsetHeight - window.innerHeight;
  
  const panX = maxX * xDecimal * -1,
        panY = maxY * yDecimal * -1;
  
  gallery.animate({
    transform: `translate(${panX}px, ${panY}px)`
  }, {
    duration: 4000,
    fill: "forwards",
    easing: "ease"
  })
}

});

我需要所有的瓷砖显示在各自的地方和**如果你想看看它实际上应该如何看，你可以只删除所有的链接标签。

• 如果有人能告诉我如何使用算法而不是“第n个孩子”来自动添加新图像，那也会很有帮助。*

先谢谢你了！！！