在鼠标悬停时，借助 jQuery 淡化具有相同类的其他元素答案

【问题标题】：On mouseover fade other elements with same class with the help of jQuery在鼠标悬停时，借助 jQuery 淡化具有相同类的其他元素
【发布时间】：2013-12-28 23:50:21
【问题描述】：

我有几个背景由 css sprites 组成的 div，它们都共享同一个类 - .picture。

当我将鼠标悬停在任何这些 div 上时，我需要所有其他 .picture div 褪色，所以基本上只有我悬停的 div 不会褪色。

如果我没有将鼠标悬停在这些 div 上，我需要所有这些 div 不褪色。

到目前为止我尝试过：

$(function() {      
        $(".picture").css("opacity","1.0");       
        $(".picture").hover(function () {     
                $(this).siblings().stop().animate({opacity: 0.5}, "fast");   
        },          
        function () {      
                $(".picture").stop().animate({opacity: 1.0}, "fast");       
        });   
});

但它不起作用。我怀疑这与这些嵌套的.picture div 干扰.siblings() 选择器的方式有关，但我自己无法弄清楚:(

这里是代码 - http://jsfiddle.net/38eqH/1/。

【问题讨论】：

标签： jquery hover fade siblings

【解决方案1】：

var elems = $('.picture');
elems.on('mouseenter mouseleave', function(e) {
    elems.not(this).stop(true).fadeTo('fast', e.type=='mouseenter'?0.5:1);
});

FIDDLE

【讨论】：

【解决方案2】：

我在我的网站上的投资组合页面上具有完全相同的效果。 http://somdow.com/portfolio.php

这是我的代码，你应该明白它的要点。

$('.portThumbsL ,  .portThumbsR').hover(function(){

    //ANIMATIONS FOR THE THUMBS
    $('.portThumbsL,  .portThumbsR').not(this).animate({opacity:.2},{queue:false,duration:500});
    //$(this).css("cursor","crosshair");
    }, 
    function(){
        $(this).children('.portSecRollOver').css("display","none");
    $('.portThumbsL,  .portThumbsR').not(this).animate({opacity:1},{queue:false,duration:500});
 });

希望这有助于或引导您朝着正确的方向前进。祝你好运

【讨论】：