图像翻转，无Javascript，无链接，纯CSS，代码验证和与Broswer兼容

| 图像翻转，无JavaScript，无链接，纯CSS，代码验证和浏览器兼容。 大家好，我一直在24小时工作，想出这个简单的解决方案。我想知道一切是否正常，是否有改进的方法。非常优雅，我们开始： 我只有一个图像“ Logo”，但它将显示为2个不同的徽标，每个徽标都有翻转效果。 我使用一个精灵（只有1张图片包含4个徽标），我只是更改了图片的位置。 在这里，我将图像插入div中

<div id=\"logo-rollover-1\" class=\"logo-rollover\">
    <img title=\"whatever\" alt=\"whatever\" src=\"path-to-your-image\">
</div>

然后我在另一个div中插入相同的图像，但ID不同

<div id=\"logo-rollover-2\" class=\"logo-rollover\">
    <img title=\"whatever\" alt=\"whatever\" src=\"path-to-your-image\">
</div>

现在我的CSS：

.logo-rollover {
    background: #ffd42a url(\'path-to-your-image\');
    width: 230px;
    float: left;
    height: 130px;
    overflow: hidden;
    position: relative;
}

.logo-rollover img { width: 460px; height: 260px; }

.logo-rollover :hover { opacity: 0; filter:alpha(opacity=0); }

#logo-rollover-1 { background-position: 0px -130px; }

#logo-rollover-2 { background-position: -230px -130px; }

#logo-rollover-2 img { right: 230px; position: relative; display: block; }

说明：当有人悬停图像时，它变得透明并显示背景女巫是同一图像，但位置不同。 opacity：对于Firefox，Google，为0；对于Explorer，过滤器：alpha（opacity = 0）。位置：.logo-rollover类上的相对位置是为了与IE6和IE7兼容隐藏溢出。显示：块;已添加到Opera浏览器的id img中。 没有技巧：没有链接时，就不需要href = \“＃\”或\“ javascript：void（0）\” 优点：仅请求1张图片（而不是请求4张（或更多）图片）（1张图片精灵的总大小小于4张图片的总大小）。由于已经下载了映像，因此过渡是即时的。没有黑客，没有虚假链接，代码验证。在图像上添加标题。唯一未滚动的浏览器是IE6，但网站未损坏，徽标正确显示。可以为IE6激活悬停功能，但是IE6已死，所以我没有打扰。 提示：您的图片在任何地方都应使用相同的路径。 我的意思是所有呼叫的“您的图像路径”都必须相同。由于浏览器缓存。 这是最好的优雅方式吗？可以改进此代码吗？我希望它能对某人有所帮助，因为在这里感谢其他用户确实是一件痛苦的事，我在这里到处发现了一些窍门，并提出了这个建议。 评论表示赞赏。