Question

我正在尝试更改以前的元素，当一个人悬停时，所以当一个带有类项目的div被悬停时，其余的div与项目更改为更小的大小，除了那个。有人可以帮我弄清楚如何用jquery选择所有以前的元素。

这是我试图使用的jquery -

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

HTML

<div id="parent">
  <div class="item">
    <img width="100%" height="100px;" style="background:#000; float: left;"/>
    <div class="child">
      info
    </div>
  </div>
  <div class="item">
  </div>
  <div class="item">
  </div>
</div>

Answer 1

剩下的div，还是之前的div？以前的使用prevAll()，其余的div使用siblings()。在任何方面，您都应该尝试将CSS规则保留在JavaScript之外，并尽可能引用CSS类。

CSS ：

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

<强>的jQuery ：

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

使用之前的div进行演示：http://jsfiddle.net/Q89R7/

与所有兄弟姐妹一起演示：http://jsfiddle.net/2F3Ae/

Answer 2

试试这个

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

或者您可以尝试单独的属性，如

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

Answer 3

你需要

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

演示：Fiddle

Answer 4

要更改您需要使用的其余div siblings()，prevAll()将获取该元素之前存在的所有元素。试试这个。

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

Answer 5

试试这个

<强> DEMO

Jquery的

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

Answer 6

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

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

如何改变以前兄弟姐妹的CSS

6 个答案: