Jquery 如何更改以前同级的css

当一个元素被悬停时，我试图更改前面的元素，因此当一个带有类item的div被悬停时，带有item的其他div将更改为较小的大小，除了那个。有人能帮我弄清楚如何用jquery选择前面的所有元素吗

这就是我试图使用的jquery-

$("div.item").hover.prevAll().css('opacity', '.4')
$("div.item").hover.prevAll().css('width', '10%')

Html

信息

您需要

$("div.item").hover(function(){
    $(this).siblings().css({
        opacity: '.4',
        width: '10%'
    });
}, function(){
    $(this).siblings().css({
        opacity: 1,
        width: ''
    });
})

---

演示：

其他div，还是之前的div？以前的div使用

prevAll（）

，其余的div使用

同级（）。在任何方面，您都应该尝试将CSS规则排除在JavaScript之外，并尽可能引用CSS类

CSS：

.item.hovered {
    opacity : .4;
    width   : 10%;
}

jQuery：

$('div.item').hover(function() {
    $(this).prevAll().toggleClass('hovered');
});

与以前的div一起演示：

使用所有同级进行演示：
要更改其余div，需要使用
同级（）
，
prevAll（）
获取该元素之前存在的所有元素。
试试这个

 $("div.item").hover(function(){
   $(this).siblings().css({'opacity': '.4',width:'10%'})
}, function(){
   $(this).siblings().css({opacity: 1,width: ''});
});

像这样试试

$("div.item").hover(function(){
   $(this).prevAll().css({'opacity': '4','width':'10%'})
});

或者你也可以尝试一些单独的属性，比如

$(this).prevAll().css('opacity','4');
$(this).prevAll().css('width','10%');

试试这个


Jquery

  $("div.item").hover(function () {     
      $("div.item").css('opacity', '.4');
      $("div.item").css('width', '10%');
      $(this).css('opacity', '1');
      $(this).css('width', '10%');
  })

不要使用任何javascript，只需使用CSS即可

#parent:hover div.item { opacity:0.4;width:10%;}
#parent div.item:hover { opacity:1;width:100%;}

@rjf0909问题是什么我不知道，这些似乎都没有，但它们在JSFIDLE上有，所以我试图确定这是否是我的css+1，这是性感的。我会选择这个，而不是我的答案，除非你打算设置转换的动画。
#parent:hover div.item { opacity:0.4;width:10%;}
#parent div.item:hover { opacity:1;width:100%;}