Jquery 关于悬停div更改图像

毫无疑问，这个问题以前已经讨论过好几次了，但根据我的要求，我没有找到一个好的解决方案

问题是我想在将鼠标悬停在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--

---

如果您将鼠标悬停在灰色区域上，则它应该会更改图像，但不会更改图像。

首先，您需要在角色框上用

指示一个类选择器，并用jquery$（此）

}))

试试看

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

---

这是你要找的吗？您可以通过纯CSS实现这一点，正如这里所述：您始终是救世主。再次感谢。

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

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