如何在悬停时更改多个图像的列表答案

【问题标题】：How to change a list of multiple images on hover如何在悬停时更改多个图像的列表
【发布时间】：2019-04-02 10:30:48
【问题描述】：

我有一个图像列表，当我将鼠标悬停在其上时，我想对其进行更改，然后在鼠标离开时更改回上一个图像。并且每个图像都是不同的。我已经完成了，但是只有当鼠标悬停在第一个项目上时，才会在两个图像上执行该事件。我想不出正确的方法。

//html代码//

      <li>
        <div class="card">
              <img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">
              <h1>Lorem1</h1>
              <span class="price-first">$24.99</span>
              <span class="price">$17.99</span>
              <br>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
              <p>Lorem ipsum dolor sit amet..</p>
              <button class="add-to">Add to Cart</button>
        </div>  
       </li>
       <li>
        <div class="card">
              <img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">
              <h1>Lorem2</h1>
              <span class="price-first">$24.99</span>
              <span class="price">$14.99</span>
              <br>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star checked"></span>
              <span class="fa fa-star"></span>
              <span class="fa fa-star"></span>
              <p>Lorem ipsum dolor sit amet..</p>
              <a href="product-page.html"><button class="add-to">Add to Cart</button></a>
        </div> 
       </li>

//JavaScript//

 let img = document.querySelectorAll('.card img');

for (var i = 0; i < img.length; i++) {
     img[i].addEventListener('mouseover', hover);
     img[i].addEventListener('mouseout', leave);
}


function hover() {
    document.getElementById("my-img1").src = "./images/AMH010301_G-5-dresslink.jpg";
    document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg";

}

function leave() {

    document.getElementById("my-img1").src = "./images/AMH010301_G-1-dresslink.jpg";
    document.getElementById("my-img2").src = "./images/AMH010327_W-1-dresslink.jpg";

}

【问题讨论】：

好吧，你硬编码了两个图像以在 mousever 上更改，所以不确定问题是什么......
img[i] = document.querySelector('.my-img').addEventListener('mouseover', hover); 这毫无意义
epascarello。问题是当我将鼠标悬停在这些图像中的任何一个上时，事件都会发生在我不想要的两个图像上。我希望每个事件都在我悬停的图像上执行。所以基本上当我将鼠标悬停在图像一上时。图片二也被悬停
您在每个循环中将事件绑定到完全相同的图像......document.querySelector('.my-img') 正在选择相同的图像。您的代码正在更改图像二！ document.getElementById("my-img2").src = "./images/AMH010327_W-5-dresslink.jpg"; 在悬停代码中，它不知道不应该只为某个图像更改它。
epascarello。我刚刚编辑了实际上是我的错误的代码，但问题仍然存在。

标签： javascript html hover onmouseover onmouseout

【解决方案1】：

首先，您似乎只是将您的活动附加到其中一个图像上，而不是同时附加到两个图像上。下面的代码将循环遍历所有图像并为其附加事件。

let img = document.querySelectorAll('.card img');
for (var i = 0; i < img.length; i++)
{
    img[i].addEventListener('mouseover', hover);
    img[i].addEventListener('mouseout', leave);
}

您附加到图像的第二个事件不会查看悬停的图像，它只会更改它们的图像。以下代码将查看您悬停的图像并仅对其进行修改。

function hover(e) { e.target.src = e.target.getAttribute("data-hover-img"); }
function leave(e) { e.target.src = e.target.getAttribute("data-leave-img"); }

最后，要让每张图像都有不同的图像可以在悬停和悬停之间切换，您需要将该信息存储在与图像相关的某个位置。如上所示，我选择使用数据属性。所以你的图片的 HTML 应该是这样的。

<img class="my-img" id="my-img1" src="./images/AMH010301_G-1-dresslink.jpg" data-hover-img=""./images/AMH010301_G-5-dresslink.jpg"" data-leave-img="./images/AMH010301_G-1-dresslink.jpg" alt="Denim Jeans">

<img class="my-img" id="my-img2" src="./images/AMH010327_W-1-dresslink.jpg" data-hover-img="./images/AMH010327_W-5-dresslink.jpg" data-leave-img="./images/AMH010327_W-1-dresslink.jpg" alt="Denim Jeans">

【讨论】：

帕特里克史密斯。谢谢兄弟，使用属性很简单干净，但我把它弄复杂了。
没问题！我会考虑使用 jQuery，因为它会让你做的很多事情变得更简单。

【解决方案2】：

每次迭代都选择相同的图像....

document.querySelector('.my-img')  <-- selects first image with the class

因此，您只需将鼠标悬停多次绑定到第一个图像。现在，如果您修复了循环以选择正确的图像，您仍然会遇到问题，因为您的悬停代码看起来不知道您悬停的是什么图像，并且您更改了方法内的所有图像。

因此，您可以在悬停中添加逻辑，或者您可以简化代码。

因此，您想要做的是，当您将鼠标悬停在一张图片上时，它会变为另一张图片。最简单的方法之一是使用数据属性和鼠标事件。

document.querySelectorAll('[data-src2]').forEach(function (img) {
  img.addEventListener('mouseenter', function() {
    if (!img.dataset.src) {  // see if we hovered yet
      img.dataset.src = this.src  // if not set orginal source so we can flip back
    }
    img.src = this.dataset.src2  //set src to second image
  })
  img.addEventListener('mouseleave', function() {
    img.src = this.dataset.src  //set back to orginal
  })
})

<img src="https://placekitten.com/200/300" data-src2="https://placekitten.com/g/200/300" />

<img src="https://placekitten.com/200/200" data-src2="https://placekitten.com/g/200/200" />

【讨论】：

【解决方案3】：

您是否在询问如何注册事件监听器并能够回溯触发事件的元素？类似的东西：

img[i] = document.querySelector('.my-img').addEventListener('mouseover', function() { theselectedElement=i; hover();});

（2 个语句——一个用于事件，另一个用于元素）然后根据所选元素处理事件？

【讨论】：