来自其他 Div 的 jQuery 鼠标悬停图像

Question

<div id="menu_1"><img src="replacement"/></div>
<div id="menu_2"><img src="replacement"/></div>
<div id="menu_3"><img src="replacement"/></div>

<div id="menu_1_hover"><img src="onhover_userreplacement_img"/></div>
<div id="menu_2_hover"><img src="onhover_userreplacement_img"/></div>
<div id="menu_3_hover"><img src="onhover_userreplacement_img"/></div>

我如何将鼠标悬停在 menu_1、menu_2 和 menu_3 上，将图像替换为位于 menu_1_hover、menu_2_hover、menu_3_hover 中的相应图像？

Answer 1

最好使用 CSS 而不是 JQuery，但如果您必须在 JQuery 中执行此操作，我可以发布答案，请通知我。 :)

Answer 2

$(document).ready(function() {
    $("#menu_1").hover(function() {
        var id = $(this).attr("id");
        var src = $(this).children("img").attr("src");
        $("#" + id + "_hover").children("img").attr("src", src);
    });
});

一个工作示例： http://jsfiddle.net/gtWCY/

要添加单个悬停事件侦听器，我需要建议向所有菜单添加一个像“hover”这样的类。

Answer 3

$("#menu_1").hover(function () {
    $(this).html($("div #"+$(this).attr("id")+"_hover").html());
}

这应该适用于“menu_1”，您应该为所有元素设置一个类，这样您只需放置 .hover 一次。未测试。 :)