Question

如果我们打开以下网站 - http://www.gazelle.com/并将鼠标悬停在图像上，我们会看到对图像的一些影响（所有图像都显示为灰色，只有一个图像是彩色的）。

请，只需调用效果的名称，我将自己调查更多，我可以编写代码，我只是不明白核心思想。

我试着查看代码。首先我认为他们在鼠标上改变了图像，但事实并非如此。我看到只显示图像：http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png

Answer 1

每个<li>元素都有您发现的背景图片。每个background-position的{{1}}都不同。（这样每个<li>显示一个图像）

当你的鼠标光标在一个图像上时，有一个css规则（它也可以是一个javascript函数）可以改变其他图像的难度。即如果您将鼠标放在ipad上，则所有其他<li>的不透明度将设置为0.5

这是网站实现效果的方式。

已编辑：如果您检查HTML元素，您可能会看到所有这些行为发生。

Answer 2

两种风格规则就足够了。假设有一个.container元素，它包含许多.image元素。 .image元素可以是带有背景精灵图像的IMG或DIV或LI，如您提到的示例中那样无关紧要。效果可以这样实现：

.container:hover .image { opacity: .5; }
.container:hover .image:hover { opacity: 1; }

Answer 3

我是通过使用CSS和：hover CSS伪类这样做的：

<ul>
    <li class="one">Object 1</li>
    <li class="two">Object 2</li>
    <li class="three">Object 3</li>
</ul>

和

ul li {
    width: 110px;
    height: 180px;
    text-align: center;
    display: inline-block;
    background: url('http://m0-beta.gazelle.com/images/pages/index/main_stack_products.png') no-repeat 0 0;
}
ul:hover > li {
    opacity: 0.6;
}
ul li:hover {
    opacity: 1;   
}
ul li.one {
    background-position: -110px 20px;   
}
ul li.two {
    width: 120px;
    background-position: -230px 20px;   
}
ul li.three {
    width: 100px;
    background-position: -365px 20px;   
}

http://jsfiddle.net/xESQK/

另一个解决方案是使用相同HTML的jQuery（可以在这里使用超时）：

$(document).ready(function() {
    $('ul li').bind('mouseover', function() {
        $siblings = $(this).siblings();
        $siblings.animate({"opacity": "0.4"}, "fast"); 
    }).bind('mouseout', function() {
        $siblings.css('opacity', 1).stop(); 
    });
});

http://jsfiddle.net/xESQK/2/

Answer 4

您可以这样使用。 DEmo

$(document).ready(function() {

    $('#special a').bind('mouseover', function(){
        $(this).parent('li').css({position:'relative'});
        var img = $(this).children('img');
        $('<div />').text(' ').css({
            'height': img.height(),
            'width': img.width(),
            'background-color': 'orange',
            'position': 'absolute',
            'top': 0,
            'left': 0,
            'opacity': 0.5
        }).bind('mouseout', function(){
            $(this).remove();
        }).insertAfter(this);
    });

});

如何达到以下效果？

4 个答案: