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);
});

<强> Check Fiddle

<强> Updated Fiddle

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

用父div改变img src是悬停的

1 个答案: