在悬停div更改图像

Question

毫无疑问，这个问题已经被讨论过几次了，但是对于我的要求，我没有找到一个好的解决方案。

问题是我想在悬停div而不是图像时更改图像的src。

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

如果将鼠标悬停在灰色区域上，则它应该会更改图像，但事实并非如此。

Answer 1

首先，您需要使用指示Roles_box上的类选择器. 并用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

Answer 2

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

}）;

Answer 3

尝试

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