jQuery Mouseover Image с другого Div

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>

Как мне при наведении указателя мыши на меню_1, меню_2 и меню_3 заменить изображения соответствующими изображениями, расположенными в menu_1_hover, menu_2_hover, menu_3_hover?

Answer 1

Лучше использовать CSS вместо JQuery, но если вам нужно сделать это в JQuery, я могу опубликовать ответ, просто сообщите мне.:)

Answer 2

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

Это должно работать для "menu_1", вы должны установить класс для всех элементов, так что вам нужно только поставить вещь .hover один раз.Не испытано.:)

Answer 3

$(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", для всех меню.