0

ホバーしたときに前の要素を変更しようとしているので、クラスアイテムを含む div をホバーすると、アイテムを含む残りの div がその 1 つを除いて小さいサイズに変更されます。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

これを試して

デモ

Jクエリ

  $("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

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

あなたが必要

$("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 に答える