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

Answer 2

要单独列出太多小错误。请查看原件：

$('.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', 'http://lorempixel.com/output/cats-q-c-525-525-7.jpg');
    $("#main").find('.title').text('Google Glass has new rival in GlassUp smart specs');
});

<强> jsFiddle example

jQuery：将鼠标悬停在img上以更改img和文本

2 个答案: