0

目前，我正在开发一个网站，该网站在单独的精灵表上有多个图像（例如此链接中的两个（imgur）。我正在尝试将较暗的图像淡化为较亮的图像，并且我一直在使用类似的东西：

.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;
}

这可行，但它只会使图像立即改变，我更喜欢悬停时的某种“淡入”或“发光”效果。实现我想要的结果的最简单方法是什么？我想它会是 jQuery 或 CSS3 中的东西，但我真的没有运气。

4

2 回答 2

2

在 CSS 3 中，您可以这样做，设置opacity并添加transformation，您只需要一张图片！看看这个：

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 */
}​

小提琴：http: //jsfiddle.net/sBeed/

于 2012-09-05T19:03:56.220 回答
0

在容器中放置一个带有悬停类的 div，然后淡入悬停 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;
}
于 2012-09-05T19:01:36.467 回答