jQuery的：將鼠標懸停在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