将鼠标悬停在不同元素的img标签类中更改图像的src [英] hover over a tag class change image src of img in different element
本文介绍了将鼠标悬停在不同元素的img标签类中更改图像的src的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
< 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(){targetElement.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屋!
查看全文