javascript - 复制并在悬停时显示图像

Question

当悬停在图像上时，如何让图像复制并出现在其他地方？复制的图像应出现在具有类 thumbnailPreview 的 div 中，并且应隐藏类 previewImages。只要用户将鼠标悬停在图像上，此操作就应该最少。

我制作了这个小图形:

悬停缩略图之前:

<div class="previewImages">
      <img src="/cat.png">
</div>

<img class="ImageAttributeList" src="/dog.png">

悬停缩略图时(div .previewImages 隐藏)

<div class="previewImages">
      <img src="/cat.png">
</div>

<div class="thumbnailPreview">
      <img src="/dog.png">
</div>

<img class="ImageAttributeList" src="/dog.png">

我需要某种脚本，但我没有编码经验

Answer 1

你说你用的是jQuery？

如果您知道如何安装 jQuery 并且已经在您的页面上正确安装了它，那么这应该可以工作:

$('.ImageAttributeList').mouseenter(function () {
  $('div.previewImages')
  .hide()
  .after('<div class="thumbnailPreview">' +
         '<img src="' + $(this).attr('src') + '">' +
         '</div>');
});

$('.ImageAttributeList').mouseleave(function () {
  $('div.previewImages').show();
  $('div.thumbnailPreview').remove();
});

确保仅在 DOM(您的元素)加载后才添加上述事件监听器。

您可以通过使用 jQuery 的 $(document).ready 包装它来做到这一点或将其放入 <script> body 内的标签等。