Jquery 在CSS中淡入另一个精灵表位置的最简单方法

目前，我正在一个网站上工作，该网站在单独的精灵表上有多个图像（如中的两个）。我正在尝试将较暗的图像淡入较亮的图像，我一直在使用类似以下内容：

.display {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 -53px;
    width: 124px;
    height: 53px;
}
.display:hover {
    background-image: url("../images/1.png");
    display: block;
    background-position: 0 0px;
    width: 124px;
    height: 53px;
}

---

这是可行的，但它只是让图像瞬间改变，我更喜欢某种“淡入”或“发光”对hover的影响。实现我想要的结果最简单的方法是什么？我想可能是jQuery或CSS3中的某个东西，但我真的没有运气。

在容器中放置一个带有hover类的div，然后淡入hover div。我以前做过这件事……这适用于任何浏览器，甚至ie7/ie8

<div class="container">
    <div class="hover"></div>
</div>

$(".container").hover(function(){
    $(".hover", this).fadeIn();
});

.container {
    position:relative;
}

.container.hover {
    position:absolute;
    top:0px;
    left:0px;
    display:none;
}

$（“.container”）.hover（函数（）{
$（“.hover”，this.fadeIn（）；
});
.集装箱{
位置：相对位置；
}
.悬停{
位置：绝对位置；
顶部：0px；
左：0px；
显示：无；
}

在CSS 3中，您可以这样做，设置

不透明度

并添加

转换

，在那里您只需要一张图像！查看以下内容：

img {
    opacity: 0.5;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}
img:hover {
    opacity: 1;
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s; /* Firefox 4 */
    -webkit-transition: opacity 0.5s; /* Safari and Chrome */
    -o-transition: opacity 0.5s; /* Opera */
}​

---

小提琴手：这太完美了，谢谢！我现在也可以将我们所有的图标组合到同一张纸上，而不会有太大的混乱。：）