JQuery: Hover на IMG изменить IMG и текст

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