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

在悬停div更改图像

3 个答案: