1

这是我要完成的工作：

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

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

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

$('.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);
});

我在这里做了一个小提琴来帮助你展示我正在使用的东西。预先感谢您的帮助。

4

2 回答 2

2

尝试这个：

// 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);
});

小提琴演示

于 2013-07-19T20:51:25.343 回答
1

小错误太多，无法单独列出。对照您的原件检查：

$('.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 示例

于 2013-07-19T20:47:12.600 回答