鼠标退出后返回到原始图像源

on mouse out return to original image source

本文关键字：原始 图像 返回 退出 鼠标      更新时间：2023-09-26

我正在使用下面的代码操纵图像源，效果很好，但我未能添加mouseout函数(因此，当不悬停在指定的<li>之一上时)在下面的代码中更改的图像源，返回到任何悬停发生之前的情况，任何想法?

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

更新原图;在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;
  });
}

将这些行添加到mouseover函数中(在设置src之前)

var _src = that.getAttribute('src');
that.setAttribute('data-old-src', _src);

在mouseleave

中修改这一行
imageContainer.src = '';


imageContainer.src = that.getAttribute('data-old-src');
相关文章：