Question

我的事件监听器仅适用于最后一个元素，即使我将鼠标悬停在第一个或第二个元素上。它实际上是按照我想要的方式工作，但我需要它能够为所有这些功能...

它显示了3个带有bacgkorund图像的div（这很好）但是当我将它们中的每一个悬停时，最后一个总是悬停。我在JS和FOR方面都不娴熟，所以我不会在那里看到问题。

我的HTML：

<a href="#" class="produkt">
        <div class="obrazek" img-before="img/prod.png" img-after="img/prod_h.jpg"></div>
        <div class="nazev">MATCHA KULINARY</div>
        Cena 260Kč<br> 
        <span>zobrazit</span>
      </a>
      <a href="#" class="produkt">
        <div class="obrazek" img-before="img/prod_kat.png" img-after="img/prod_h.jpg"></div>
        <div class="nazev">MATCHA KULINARY</div>
        Cena 260Kč<br> 
        <span>zobrazit</span>
      </a>
      <a href="#" class="produkt">
        <div class="obrazek" img-before="img/prod.png" img-after="img/prod_h.jpg"></div>
        <div class="nazev">MATCHA KULINARY</div>
        Cena 260Kč<br> 
        <span>zobrazit</span>
      </a>

我的CSS：

.prod .produkt .obrazek{
  width: 70%;
  height: 250px;
  background-size: cover;
  background-position: center;
}

我的JS：

    var elements = document.querySelectorAll('.obrazek');
    for (var i = 0; i < elements.length; i++) {
      var element = elements[i];
      if(element) {
        var before = element.getAttribute('img-before');
        var after = element.getAttribute('img-after');

        if(before && after) {
            element.style.background = 'url(' + before + ')'; // set the first background

            element.addEventListener('mouseover', function(event) {
                element.style.background = 'url(' + after + ')';
            });
            element.addEventListener('mouseout', function(event) {
                element.style.background = 'url(' + before + ')';
            });
        }
      }
    }

有人可以帮我吗？我没有...在stackoverflow上的用户帮助我使用了JS代码，但它是使用querySelector（），所以我发现，当我需要让它适用于所有元素时，我有使用带有FOR循环的querySelectorAll（）...

FOR中的事件侦听器仅适用于最后一个

0 个答案: