0

我试图在一个元素悬停时更改以前的元素，所以当一个带有类项的 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>
4

6 回答 6

3

其余的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/

于 2013-08-02T05:08:50.133 回答
2

像这样试试

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

或者您可以尝试单个属性，例如

$(this).prevAll().css('opacity','4');
$(this).prevAll().css('width','10%');
于 2013-08-02T05:09:42.867 回答
1

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

#parent:hover div.item { opacity:0.4;width:10%;}
#parent div.item:hover { opacity:1;width:100%;}
于 2013-08-02T07:06:12.277 回答
1

尝试这个

演示

jQuery

  $("div.item").hover(function () {     
      $("div.item").css('opacity', '.4');
      $("div.item").css('width', '10%');
      $(this).css('opacity', '1');
      $(this).css('width', '10%');
  })
于 2013-08-02T05:13:05.147 回答
1

你需要

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

演示：小提琴

于 2013-08-02T05:08:13.843 回答
1

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

 $("div.item").hover(function(){
   $(this).siblings().css({'opacity': '.4',width:'10%'})
}, function(){
   $(this).siblings().css({opacity: 1,width: ''});
});
于 2013-08-02T05:08:50.153 回答