javascript - 如何达到以下效果？

Question

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

拜托，叫出效果的名字吧，我自己研究再多写代码，就是看不懂核心思想。

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

Answer 1

每个<li>元素都有您发现的背景图像。并且background-position每个<li>. （这样每个<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

你可以这样使用。演示

$(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);
    });

});