Change img src with parent div is hovered

Question

I'm trying to change an img src when a mouse enters its parent div.

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

I am able to change the img when it is hovered with the code below but when it comes to what i really want i'm stuck...

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

Any help is appreciated http://jsfiddle.net/v5d9p08t/4/

edit * I have 2 rows of 5 of these *

"I am able to change the img when it is hovered with the code below but when it comes to what i really want i'm stuck..." - what is it that you really want? — Neil S, Sep 24 '15 at 22:32
Why change the src attribute, it's so much work. Just have two images, and with pure css hide one and show the other on hover. — Erik Philips, Sep 24 '15 at 22:34
in Joomla articles only allow for a single image. i want them to have a rollover effect. — Bwsusa, Sep 24 '15 at 22:37

Sushanth -- · Answer 1 · 2015-09-24T23:04:01.600

0

Attach the event to the parent container and then find the image inside it.

Then you can apply your logic to the image directly.

$(".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

But I prefer the CSS approach for such scenario.

edited Sep 24 '15 at 23:04

answered Sep 24 '15 at 22:35

Sushanth --

55,259
9
66
105

Thanks much that did it... atleast in my fiddle session – Bwsusa Sep 24 '15 at 22:38
@Bwsusa Glad to have helped ! – Sushanth -- Sep 24 '15 at 22:39
the problem with this is that with 10 other category-module-item entries under my hp-dep they all change when the mouse enters hp-dep. when changed to another child div they still all change at the same time instead of independently. – Bwsusa Sep 24 '15 at 22:49
Change `$(".category-module-item")` to `$(".category-module-item-inner")` and `var $img = $(this).find('.category-module-item-inner img')` to `var $img = $(this).find('img')` http://jsfiddle.net/v5d9p08t/7/ – Sushanth -- Sep 24 '15 at 23:03

Change img src with parent div is hovered

1 Answers1