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当鼠标离开该div时，将悬停时的背景css更改为红色。

希望它有所帮助。

修改

我用你的html制作了fiddle，它使用了来自互联网的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 });

试图用Javascript更改图像源，而不是工作

1 个答案: