javascript - 无能为力。 Firefox 中的 jQuery 图像交换问题，适用于 IExplorer 8

Question

我遇到了一系列社交按钮及其翻转事件的问题。我有 6 张图像，类别为“social32”，我想将其从“关闭”状态更改为彩色图像。所有文件都命名为“facebook_32.png”和“facebook_32_off.png”

$(".social32").each(function(){
    var t=$(this);
    var src1= $(this).attr("src");
    var newSrc = src1.substring(src1.lastIndexOf("/"), src1.lastIndexOf("_off."));
    $(this).hover(function(){
        $(this).attr("src", "imgs/"+newSrc+"." + /[^.]+$/.exec(src1));
    }, function(){
        $(this).attr("src", "imgs/"+newSrc+"_off." + /[^.]+$/.exec(src1));
    });
});

而且 HTML 代码再简单不过了。

    <p class="bottom10">
<img class="social32" src="imgs/facebook_32_off.png" width="32" height="32" alt="Facebook" id="Facebook" />
    <img class="social32" src="imgs/twitter_32_off.png" width="32" height="32" alt="Twitter" id="Twitter" />
    <img class="social32" src="imgs/linkedin_32_off.png" width="32" height="32" alt="LinkedIn" id="Linkedin" />
    <img class="social32" src="imgs/skype_32_off.png" width="32" height="32" alt="Skype" id="Skype" />
    <img class="social32" src="imgs/googletalk_32_off.png" width="32" height="32" alt="Google Talk" id="GTalk" />
    <img class="social32" src="imgs/googlewave_32_off.png" width="32" height="32" alt="Google Wave" id="GWave" />
    </p>

无论出于何种原因，这在 IExplorer 8 上都能完美运行，但在 Firefox、Safari 或 Chrome 上却不行。

感谢您的提前输入!

Answer 1

对 css 的东西使用 css，对 javascript 的东西使用 javascript。

<style>
.social32{
    float: left;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
}
.facebook{
    background: url(imgs/facebook_32_off.png);
}
.facebook:hover{
    background: url(imgs/facebook_32.png);
}
.twitter{
    background: url(imgs/twitter_32_off.png);
}
.twitter:hover{
    background: url(imgs/twitter_32.png);
}
/* continue with others */
</style>

<p class="bottom10">
    <a href="#" class="social32 facebook">Facebook</a>
    <a href="#" class="social32 twitter">Twitter</a>
    <a href="#" class="social32 linkedin">Linkedin</a>
    <a href="#" class="social32 skype">Skype</a>
    <a href="#" class="social32 qoogletalk">GTalk</a>
    <a href="#" class="social32 googlewave">GWave</a>
</p>