0

我有一个包含在 css 中的黑白图像：

http://cl.ly/3G0E0g1e2G2h3k3U3F2O

在同一个文件中，我放入了彩色图像：

http://cl.ly/1l2A2F0o1j3E1z2s223V

现在我想当你将鼠标悬停在这张图片上时已经从黑白变为彩色......

我把函数放在jQuery中：

    $("ul li").mouseover(function() {

        $(this).find("span.thumb").hover().css({
            'background-position': 'center bottom'
        }).stop().fadeTo(400, 0).show();

    });

    $("ul li").mouseout(function() {

        $(this).find("span.thumb").hover().css({
            'background-position': 'center top'
        }).stop().fadeTo(400, 1).show();

    });

HTML：

<span class="thumb"></span>

CSS：

ul li span.thumb {background:url(image.png) no-repeat}

问：我怎样才能做到不同？（当您将鼠标悬停在图像上时不会消失）。

4

2 回答 2

3

嗨，在我看来，你已经稍微复杂化了，试试这个：

HTML

<div>
  <img src="http://ajthomas.co.uk/flower-col.png" alt="" />
</div>

查询

$(document).ready(function() {
    $('div').mouseover(function(){
        $('img').fadeIn('slow');
    });
    $('img').mouseout(function(){
        $('img').fadeOut('slow');
    });
});

CSS

div{width:300px;
    height:300px;
    background-image:url(http://ajthomas.co.uk/flower-gs.png)}

img{display:none;}

我也在JSFiddle上为你编写了代码

于 2011-04-12T10:20:18.460 回答
0

尝试 CSS 精灵：http ://www.alistapart.com/articles/sprites

基本技术是将两张图片组合成一张背景图片，并将其设置为 html 元素的背景。然后，当发生悬停事件时，您只需将背景图像“移动”到背景图像的彩色部分可见的位置。使用 background-position css 属性，您可以控制背景图像的哪一部分可见。

优点是第一次悬停时没有延迟，因为 bw 以及图像的彩色版本是在页面加载时加载的。

于 2011-04-12T10:17:13.467 回答