jQuery : Hover on img to change img and text

Question

这就是我想要实现的目标:

当用户将鼠标悬停在较小的图像之一上时:

• 较小的图像 + 文本应替换较大的图像 + 文本。
• 当用户没有悬停时；将大集返回到其原始图像和文字。

这就是我到目前为止所拥有的。它没有完成这项工作。那么我该如何去做呢？我究竟做错了什么？

$('.small-news').hover(function() {
    var hover_img = $(this).children('img').prop('src');
    var hover_p = $(this).children().find('p').text();
    $("#main").children('img').attr('src', hover_src);
    $("#main").children().find('#title').text(hover_p);
});

我做了一个 fiddle here 帮助您展示我正在做什么。预先感谢您的帮助。

Answer 1

试试这个:

// Cache the main element
var $main = $("#main");
var org_img = $main.find('img').prop('src');
var org_title = $main.find('.title').text();

$('.small-news').hover(function () {
    var hover_img = $(this).find('img').prop('src');
    var hover_p = $(this).find('p').text();
    $main.find('img').prop('src', hover_img);
    $main.find('.title').text(hover_p);
}, function () {
    $main.find('img').prop('src', org_img);
    $main.find('.title').text(org_title);
});

FIDDLE DEMO