Question

我遇到了一系列社交按钮及其翻转事件的问题。我有6张图片，上面写着'social32'，我想将它们从'off'状态改为彩色状态。所有文件的名称都像'facebook_32.png'＆amp; '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 ..

预先输入的Thanx！

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>

Answer 2

我同意彼得的观点。我还建议您创建社交网络图像的开启和关闭状态的精灵，这样您就不必在悬停时动态加载每个图像。这有助于防止IE中的闪烁错误以及减少整体带宽使用。这样做的好处是你不再需要关闭状态的单独类，只需改变背景定位：

/* assumes your icons are 16x16 and you have created a 16x32 icon with on and off states */
.off { background-position: 0 -16px; }

懵懵懂懂。 Firefox中的jQuery Image Swap问题适用于IExplorer 8

2 个答案: