on hover div change image

Question

No doubt, this issue has been discussed several times before but for my requirement I didn't find a good solution.

The problem is I want to change a src of an image on hovering up a div not the image.

<div class="roles_box"> <a href=""><img class="click_role" src="http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1"></a>

</div>

JsFiddle -- http://jsfiddle.net/squidraj/NcjGp/

If you hover over the grey area then it should change the image but it's not.

is this u r searching for? http://stackoverflow.com/questions/18032220/css-change-image-src-on-imghover — Vijayakumar Selvaraj, Feb 03 '14 at 12:16
You can achieve this with pure CSS, as covered here: http://stackoverflow.com/questions/8614423/how-to-change-one-element-while-hovering-over-another — Sinister Beard, Feb 03 '14 at 12:28

score 1 · Accepted Answer · answered Feb 03 '14 at 12:16

First you need to indicate a class selector on roles_box with . and wrap this with jquery $(this)

jQuery(document).ready(function () {
    jQuery(".roles_box").on({
        //  ^ need the dot to indicate class selector
        "mouseover": function () {
            $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=16f4a8f2-2cea-44c1-ba22-cf3c52729f6b&version=-1';
           //wrap this with jQuery
        },
            "mouseout": function () {
            $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1';
            //Wrap this with jQuery
        }
    });
});

DEMO

You are the saviour as always..Thanks once again. – Prithviraj Mitra Feb 03 '14 at 12:20 — Prithviraj Mitra, Feb 03 '14 at 12:20

score 0 · Answer 2 · answered Feb 03 '14 at 12:18

jQuery(document).ready(function () {
jQuery(".roles_box").on({
    "mouseover": function () {
        $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=16f4a8f2-2cea-44c1-ba22-cf3c52729f6b&version=-1';
    },
        "mouseout": function () {
        $(this).find('img.click_role')[0].src = 'http://www.nms.ac.uk/idoc.ashx?docid=71d176dc-3143-4449-8388-90512a5c53ac&version=-1';
    }
});

});

score 0 · Answer 3 · answered Feb 03 '14 at 12:21

0

try

   $(".roles_box").hover(function () {
            $(".click_role").attr("src", "http://www.nms.ac.uk/idoc.ashx?docid=16f4a8f2-2cea-44c1-ba22-cf3c52729f6b&version=-1");
        });

answered Feb 03 '14 at 12:21

Anoop Joshi P

25,373
8
32
53

on hover div change image

3 Answers3