javascript - 尝试使用 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

我认为您在功能顺序上犯了错误:

试试这个:

$("#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 时将背景 CSS 更改为蓝色。

希望有帮助。

编辑

我做了一个fiddle ，以及您的 html，它使用来自互联网的 2 个图像。看到图像在悬停输入、悬停输出中发生变化。

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