Question

我在css中包含了黑白图像：

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

现在我想将鼠标悬停在此图像上时已从黑白变为彩色......

我把这个函数放在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}

问：我怎么能以不同的方式做到这一点？（当你将鼠标悬停在图像上时并没有消失）。

Answer 1

你好我认为你已经过度复杂了，试试这个：

<强> HTML

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

<强> JQUERY

$(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

上为你编了代码

Answer 2

尝试使用CSS sprites：http://www.alistapart.com/articles/sprites

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

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

jQuery - 黑＆amp;白色图像到彩色图像（悬停）

2 个答案: