jQuery를이 : IMG와 여기에 텍스트

Question

내가 달성하기 위해 노력하고있어의 변경 IMG에 마우스를 가져 가면 :

사용자가 작은 이미지 중 하나를 가리킬 :

• 작은 이미지 + 텍스트 교체해야 큰 이미지 + 텍스트.
• 사용자가 마우스를 가리 키지 않은 경우. 큰 이미지를 원래 이미지 및 텍스트로 되돌립니다.

이것은 내가 지금까지 가지고있는 것입니다. 그 일을하고 있지 않습니다. 그렇다면이 작업을 어떻게 진행할 수 있습니까? 내가 도대체 ​​뭘 잘못하고있는 겁니까?

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