更改img src与父div悬停

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方法