javascript - 仅使用 javascript 和 'this' 更改 img 源 onmouseover

Question

尝试将 img src 属性更改为与用户悬停在网站上的另一张图片相匹配的 src。我有 1 张(主)图片，下面有 3 张(子)图片，充当画廊。当用户将鼠标悬停在这 3 个之一上时，我希望主图像的 src 属性更改为子图像的 src。 到目前为止我找到的所有分辨率，要么使用 1 个图像，其源在代码中更改，要么仅使用声明的特定源，但我不想在每次添加新图像时都在代码中添加源，而是使用 gallery(this) 作为每个子图像都应该解决它，但到目前为止我还没有运气。 抱歉，如果有相同的问题，我只是找不到它。如果这个解释太复杂，请随时提问，如果可能的话，我期待着解决这个问题。

尝试使用function name(this) 来利用图像源并将其添加到主图。 我真的只是从所有这些开始，所以到目前为止我尝试的可能还不够接近，希望你能理解。

  <img class="hover" src="imgs/mountain.jpg" id="hover" alt="">
      <div class="imgs">
        <img onmouseover="gallery(this)" src="imgs/castle.jpg" alt="">
        <img onmouseover="gallery(this)" src="imgs/mountain.jpg" alt="">
        <img onmouseover="gallery(this)" src="imgs/tree.jpg" alt="">
      </div>

    <script>
        function gallery(element) {
            x = document.getElementById('hover');
            x.src.element;
        }
    </script>

Answer 1

您实际上并没有更改src。您可以通过将 x.src 设置为 element.src 来实现:

function gallery(element) {
  x = document.getElementById('hover');
  x.src = element.src;
}

<div class="imgs">
  <img onmouseover="gallery(this)" src="https://picsum.photos/100?random=1" alt="">
  <img onmouseover="gallery(this)" src="https://picsum.photos/100?random=2" alt="">
  <img onmouseover="gallery(this)" src="https://picsum.photos/100?random=3" alt="">
</div>
<img id="hover" alt="hover">