在mouseleave上，将图像恢复到位于悬停数据源之外的原始源

Question

function createHover (that) {
  var original = document.getElementsByClassName("image_left"); // attempt
  that.addEventListener('mouseover', function() {
    var src = that.getAttribute('data-src');
    if (src) {
      imageContainer.src = src;
    }
  });
  that.addEventListener('mouseleave', function() {
    // imageContainer.src = original;
  });
}
  initImageHover('li.one > a');
});

标记:

<img src="images/grades_13.jpg" class="image_left">

上面是改变的图像。我的代码在悬停时工作，其中此源被替换为下面标记的源:

<ul class="LISTS">
     <li class="one"><a href="#" target="_blank" class="hov1" data-src="images/thumb1.jpg">Link</a></li>
<!-- test --->

但我需要一个鼠标退出功能，返回到原始源之前任何悬停;class="image_left"的原始来源

是完整的JS。

window.addEventListener('load', function() {
  var imageContainer = document.querySelectorAll('.image_left')[0];
  function initImageHover(selector) {
    var elements = document.querySelectorAll(selector);
    console.log(elements);
    for (var i = 0, len = elements.length; i < len; i++) {
      createHover(elements[i]);
    };
  }
function createHover (that) {
  var original = document.getElementsByClassName("image_left");
  that.addEventListener('mouseover', function() {
    var src = that.getAttribute('data-src');
    if (src) {
      imageContainer.src = src;
    }
  });
  that.addEventListener('mouseleave', function() {
    // imageContainer.src = original;
  });
}
  initImageHover('li.one > a');
});
window.addEventListener('load', function() {
  var imageContainer = document.querySelectorAll('.image_left2')[0];
  function initImageHover(selector) {
    var elements = document.querySelectorAll(selector);
    console.log(elements);
    for (var i = 0, len = elements.length; i < len; i++) {
      createHover(elements[i]);
    };
  }
function createHover (that) {
  var original = that.getAttribute('src');
  that.addEventListener('mouseover', function() {
    var src = that.getAttribute('data-src');
    if (src) {
      imageContainer.src = src;
    }
  });
  that.addEventListener('mouseleave', function() {
    // imageContainer.src = original;
  });
}
  initImageHover('li.two > a');
});

Answer 1

var original = document.getElementsByClassName("image_left");为您提供具有给定类名的元素数组。所以你应该首先拉一个元素(或者你应该使用id代替)，并分配该图像的来源。

that.addEventListener('mouseleave', function() {
   var origImage = original.length && original[0].src; // assuming the element exists and is an image
    // or original[0].getAttribute("src") depending on whether you want the full source of image or exactly as defined in "src" attribute
   // imageContainer.src = origImage;
});