jquery - 更改带有父 div 的 img src 悬停

Question

当鼠标进入其父 div 时，我正在尝试更改 img src。

<div class="category-module-grid clearfix category-module row-feature-full row-feature-nopadding-top hp-dep five-columns">
<div class="category-module-item  border-right">
    <div class="category-module-item-inner">
        <div class="article-img">
            <div class="img-intro">
                <img src="/images/home/ContactLenses.png" alt="">
            </div>
        </div>
    <div class="article-content">
        <h4><a class="mod-articles-category-title " href="/stomach">Contact Lenses</a></h4>
        <p class="mod-articles-category-introtext">Nullam luctus vel tortor sit amet accumsan. Integer sit amet.</p>
    </div>
</div>

当 img 悬停在下面的代码上时，我可以更改它，但是当涉及到我真正想要的东西时，我被卡住了......

$(function($) {
    $(".hp-dep .category-module-item img").mouseover(function() { 
    var src = $(this).attr('src', $(this).attr('src').replace(/(.png)$/, '') + '-wh.png')
    })
    .mouseout(function() { var src = $(this).attr("src").replace("-wh", "");
        $(this).attr("src", src);
    });
});

感谢任何帮助http://jsfiddle.net/v5d9p08t/4/

编辑 * 我有 2 行，每行 5 个 *

Answer 1

将事件附加到父容器，然后在其中找到图像。

然后您可以直接将您的逻辑应用于图像。

$(".hp-dep").mouseover(function () {
    var $img = $(this).find('.category-module-item img')
    var src = $img.attr('src', $img.attr('src').replace(/(.png)$/, '') + '-wh.png')
})
    .mouseout(function () {
    var $img = $(this).find('.category-module-item img');

    var src = $img.attr("src").replace("-wh", "");

    $img.attr("src", src);
});

检查小提琴

更新小提琴

但我更喜欢这种情况下的 CSS 方法。