Question

我试图弄清楚为什么我的代码不在这里工作，任何调试都会有所帮助。基本上，目的是改变＆＃34; .col＆＃34;中包含的img。在mouseenter上回到原来的mouseleave。我还想预加载图像，以便在mouseenter事件中没有延迟。

单个图库项目HTML的示例

<div class="col span_1_of_3 span_1_of_2" id="challenger">
    <a href="projects/challenge.html">
        <div class="projectImage">
        <div class="hovtext">Challenger</div>
            <img src="img/8.png" data-hover="img/8h.png"/>
        </div>
        <span class="title">Challenger</span>
        <span class="viewpr">View Project</span>
    </a>
</div>

JQuery的

$(function () {
    $('.col').each(function () {
          var $img = $(this).find('img');
          $img.data('original', $img.attr('src'));
          var img = new Image();
          img.src = $img.data('hover');
    }).mouseenter(function () {
          $(this).find('img').attr('src', $(this).data('hover'));
    }).mouseleave(function () {
          $(this).find('img').attr('src', $(this).data('original'));
    })
})

如有任何问题请继续询问。

编辑 - 相关网站位于：www.williamrenwick.co.uk

谢谢，将

Answer 1

在原始代码中，图片来源中的$(this)不符合您的想法 -

$(this).find('img').attr('src', $(this).data('hover')); //second $(this) is still the column, not the image

这是一个不太复杂的解决方案 -

$('.col').mouseenter(function () {
    var hover = $(this).find('img').data('hover');
    var original = $(this).find('img').attr('src');
    $(this).find('img').attr('data-original', original);
    $(this).find('img').attr('src', hover);
}).mouseleave(function () {
    var original = $(this).find('img').data('original');
    $(this).find('img').attr('src', original);
});

你可以在这里看到它 - http://jsfiddle.net/jayblanchard/au7a6/

使用JQuery在悬停时替换响应列库中的图像

1 个答案: