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/

要添加单个悬停事件监听器，我建议在所有menu_中添加类似“hover”的类。

Answer 3

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

这应该适用于“menu_1”你应该为所有元素设置一个类，所以你只需要把.hover一次。没有测试过。：）

来自其他Div的jQuery Mouseover图像

3 个答案: