将鼠标悬停在不同元素的img标签类中更改图像的src [英] hover over a tag class change image src of img in different element

问题描述

假设我有这样的事情：

 < div class =right> 
< article class =left_image> 
< img src =images / coolestimageontheplanet.jpgclass =image_left> 
< / article> 
  

然后我有一个UL列表：

 < ul class =LISTS> 
< li>< a href =＃linktarget =_ blankclass =hov5> Link 1< / a>< / li> 
<！ -  etc  - > 
< / ul> 
  

我会用直接上面的标记方式列出大约10个列表项。基于悬停类，我想换出与 class =image_left相关联的图像源，如上所示。因此，将鼠标悬停在 class =hov5上即可获取 hov5图片。

解决方案

您可以为mouseover& amp; amp; mouseleave，然后相应地改变image.src，就像这样

（selector，displaySelector）{var imageContainer = document.querySelectorAll（displaySelector）[0]，elements = document.querySelectorAll（selector）; for（var i = 0，len = elements.length; i< len; i ++）{createHover （元素[i]，imageContainer，imageContainer.src）;};}函数createHover（that，targetElement，originalImage）{that.addEventListener（'mouseover'，function（）{var src = that.getAttribute（'data-src' ）; if（src）{targetElement.src = src;}}）; that.addEventListener（'mouseleave'，function（）{ta​​rgetElement.src = originalImage;}）;} initImageHover（'li> a'，'。 image_left'）;}）;

Say I have something like this:

<div class="right">
<article class="left_image">
<img src="images/coolestimageontheplanet.jpg" class="image_left">
</article>

And then I have a UL list:

    <ul class="LISTS">
      <li><a href="#link" target="_blank" class="hov5">Link 1</a></li>
       <!-- etc -->
    </ul>

I would have about 10 list items in the directly above mark-up fashion. Based on hover class I would like to swap out the image source associated with class="image_left" as seen above. So hover over class="hov5" you get the hov5 image.

解决方案

You could add event listeners for mouseover & mouseleave and then change the image.src accordingly, like in such a way

window.addEventListener('load', function() {
  function initImageHover(selector, displaySelector) {
    var imageContainer = document.querySelectorAll(displaySelector)[0],
      elements = document.querySelectorAll(selector);

    for (var i = 0, len = elements.length; i < len; i++) {
      createHover(elements[i], imageContainer, imageContainer.src);
    };
  }

  function createHover(that, targetElement, originalImage) {

    that.addEventListener('mouseover', function() {
      var src = that.getAttribute('data-src');
      if (src) {
        targetElement.src = src;
      }
    });
    that.addEventListener('mouseleave', function() {
      targetElement.src = originalImage;
    });
  }

  initImageHover('li > a', '.image_left');
});

<div class="right">
  <article class="left_image">
    <img src="images/coolestimageontheplanet.jpg" class="image_left">
  </article>

  <ul class="LISTS">
    <li><a href="#link" target="_blank" class="hov1">Link 1</a>
    </li>
    <li><a href="#link" target="_blank" class="hov2">Link 2</a>
    </li>
    <li><a href="#link" target="_blank" class="hov3">Link 3</a>
    </li>
    <li><a href="#link" target="_blank" class="hov4">Link 4</a>
    </li>
    <li><a href="#link" target="_blank" class="hov5">Link 5</a>
    </li>
    <li><a href="#link" target="_blank" class="hov6">Link 6</a>
    </li>
    <li><a href="#link" target="_blank" data-src="http://cdn.sstatic.net/stackoverflow/img/sprites.svg?v=a7723f5f7e59" class="hov7">Link 7</a>
    </li>
  </ul>

这篇关于将鼠标悬停在不同元素的img标签类中更改图像的src的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！