Попытка изменить источник изображения с помощью Javascript, не работает

Question

Я включаю Javascript (действительно, jQuery), чтобы изменить img src в вопросе с одного изображения на другое изображение при наведении.

Однако это не работает - изображения не меняются вообще.

Мое единственное предположение, что неназванные функции не делают то, что я хочу, чтобы они делали.

Мои знания о jQuery по-прежнему несколько новы, поэтому я здесь не в курсе и не могу найти никаких ресурсов на то, что я могу делать неправильно.

jQuery("#fbicon").hover(
function() { 
    jQuery(this).attr("src","images/nohoverfb.png"); 
}, 
function() { 
    jQuery(this).attr("src","images/fb.png"); 
}); 

jQuery("#linkedinicon").hover(
function() { 
    jQuery(this).attr("src","images/nohoverlinkedin.png"); 
}, 
function() { 
    jQuery(this).attr("src","images/linkedin.png"); 
}); 

jQuery("#googleplusicon").hover(
function() { 
    jQuery(this).attr("src","images/nohovergoogle+.png"); 
}, 
function() { 
    jQuery(this).attr("src","images/google+.png"); 
}); 

jQuery("#youtubeicon").hover(
function() { 
    jQuery(this).attr("src","images/nohoveryoutube.png"); 
}, 
function() { 
    jQuery(this).attr("src","images/youtube.png"); 
}); 

jQuery("#twittericon").hover(
function() { 
    jQuery(this).attr("src","images/nohovertwitter.png"); 
}, 
function() { 
    jQuery(this).attr("src","images/twitter.png"); 
}); 

jQuery("#emailicon").hover(
function() { 
    jQuery(this).attr("src","images/nohoveremail.png"); 
}, 
function() { 
    jQuery(this).attr("src","images/email.png"); 
}); 

Вот пример HTML:

<span class="icon"><a target="_blank" href="http://www.facebook.com/facebookname"><img id="fbicon" src="http://www.website.com/sites/all/themes/website/images/fb.png" style="height:48px;width:48px"></a></span> 

Answer 1

Я думаю, что вы ошибаетесь в порядке функций:

Try это:

$("#fbicon").hover(
    function() { 
     jQuery(this).attr("src","images/fb.png"); //hover in function 
    }, 
    function() { 
     jQuery(this).attr("src","images/nohoverfb.png"); //hover out function 
    }); 

Изменить все изображения соответственно в вашем коде, и это должно делать то, что вы хотите.

See the demo fiddle, который меняет фон css на красный на зависании и синий, когда мышь уходит из этого div.

Надеюсь, это поможет.

EDIT

Я сделал fiddle, с HTML, который использует 2 изображения из Интернета. Смотрите, что изображения меняются в режиме Hover in, Hover out.

HTML:

<span class="icon"><a target="_blank" href="http://www.facebook.com/facebookname"><img id="fbicon" src="http://s2.reutersmedia.net/resources/r/?m=02&d=20141020&t=2&i=985015946&w=580&fh=&fw=&ll=&pl=&r=LYNXNPEA9J0XH" style="height:48px;width:48px"></a></span> 

JQuery:

$("#fbicon").hover(
    function() { 
     jQuery(this).attr("src","http://www.gizbot.com/img/2014/10/14-1413281227-sonyxperiaz3cropedimages600x450withwatermark3.jpg"); //hover in function 
    }, 
    function() { 
     jQuery(this).attr("src","http://s2.reutersmedia.net/resources/r/?m=02&d=20141020&t=2&i=985015946&w=580&fh=&fw=&ll=&pl=&r=LYNXNPEA9J0XH"); //hover out function 
    });