[英]Want to change an img src on hover, then to a different src on click
[英]hover over a tag class change image src of img in different element
说我有这样的事情:
<div class="right">
<article class="left_image">
<img src="images/coolestimageontheplanet.jpg" class="image_left">
</article>
然后我有一个UL清单:
<ul class="LISTS">
<li><a href="#link" target="_blank" class="hov5">Link 1</a></li>
<!-- etc -->
</ul>
我将直接以上面的标记方式获得大约10个列表项。 基于悬停类,我想换出与class="image_left"
关联的图像源,如上所示。 因此,将鼠标悬停在class="hov5"
您会得到hov5图像 。
您可以为mouseover和mouseleave添加事件侦听器,然后相应地更改image.src,就像这样
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>
像这样添加数据标签:
<ul class="LISTS">
<li><a href="#link" target="_blank" class="hov5" data-img="images/newimg.jpg">Link 1</a></li>
<!-- etc -->
然后使用如下代码:
$("ul.LISTS>li").hover(function(){
var imgurl = $(this).data("img");
$(".image_left").attr("src",imgurl);
},
function(){
$(".image_left").attr("src","images/coolestimageontheplanet.jpg");
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.