Javascript 鼠标悬停时返回原始图像源

我用下面的代码处理图像源代码，效果很好，但我没有添加mouseout函数（因此，当不将鼠标悬停在指定的

上时），下面代码中被更改的图像源返回到任何悬停发生之前的状态，有什么想法吗

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) {
    that.addEventListener('mouseover', function() {
      var src = that.getAttribute('data-src');
      if (src) {
        imageContainer.src = src;
      }
    });
    that.addEventListener('mouseleave', function() {
      imageContainer.src = '';
    });
  }

  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) {
    that.addEventListener('mouseover', function() {
      var src = that.getAttribute('data-src');
      if (src) {
        imageContainer.src = src;
      }
    });
    that.addEventListener('mouseleave', function() {
      imageContainer.src = '';
    });
  }

  initImageHover('li.two > a');
});

window.addEventListener（'load'，function（）{
var imageContainer=document.querySelectorAll（'.image_left'）[0]；
函数initImageHover（选择器）{
var元素=document.querySelectorAll（选择器）；
控制台日志（元素）；
for（var i=0，len=elements.length；ia'）；
});
addEventListener（'load'，function（））{
var imageContainer=document.querySelectorAll（'.image_left2'）[0]；
函数initImageHover（选择器）{
var元素=document.querySelectorAll（选择器）；
控制台日志（元素）；
for（var i=0，len=elements.length；ia'）；
});

更新原始图像；在li元素之外，在标记中，如下所示。当前仅获取带有两次应答尝试的图像空/死图像

<div class="block2wrap">
<div class="left">
<article class="left_image">
<img src="images/verycoolimage.jpg" class="image_left">
</article>

---

将原始图像src保存在变量中，并在鼠标离开时使用它：

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;
  });
}

---

下面是一个。

将原始图像src保存在变量中，并在鼠标离开时使用它：

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;
  });
}

---

下面是一个。

将这行代码添加到mouseover函数中（在设置src之前）

在mouseleave中更改此行

imageContainer.src = '';

到那

imageContainer.src = that.getAttribute('data-old-src');

---

将此行添加到mouseover函数（在设置src之前）

在mouseleave中更改此行

imageContainer.src = '';

到那

imageContainer.src = that.getAttribute('data-old-src');

---

将default src设置为variable，然后使用它？将default src设置为variable，然后使用它？它在控制台中说image source null，似乎开始执行我要查找的操作，但图像存储不正确！这是返回的死/空图像引用，有什么想法吗？刚刚尝试了这个var original=document.getElementsByClassName（“image_left”）@您必须确保选择了正确的元素。我用一个JSFIDLE更新了我的答案，以证明这个概念是有效的。好吧，我想我还不够具体。我提出了一个新问题；原始图像源不在切换悬停源的li内。它说控制台中的图像源为空，似乎开始执行我正在寻找的操作，但图像没有正确存储！这是返回的死/空图像引用，有什么想法吗？刚刚尝试了这个var original=document.getElementsByClassName（“image_left”）@您必须确保选择了正确的元素。我用一个JSFIDLE更新了我的答案，以证明这个概念是有效的。好吧，我想我还不够具体。我提出了一个新问题；原始图像源不在切换悬停源的li内。这是返回的死/空图像引用，有想法吗？你能提供到页面或JSFIDLE的链接吗？这是返回的死/空图像引用，有想法吗？你能提供到页面或JSFIDLE的链接吗？