のdiv

Question

私はキャプション付き画像のブロックを持っているとキャプションを表示し、非表示にするslideToggleを使用していますと他の要素の不透明度を減らすためのjQueryを使用した：画像がある場合は

$('.imageholder').hover(function() { 
    var $desc = $(this).next(); 
    $('.description').not($desc).slideUp('fast'); 
    $(this).next().slideToggle("fast"); 
    }); 

はFiddle

作業キャプションが表示されますが、包含するdiv内の他の画像の不透明度を同時に減らしたい（thisのようなもの）。助けていただければ幸いです。ありがとう。

Answer 1

ホバー機能を使用すると、エレメントをホバリングしていないときに不透明度を1に戻す機能を追加できます。 （ここでは：https://api.jquery.com/hover/）：

$('.imageholder').hover(function() { 
 
    var $desc = $(this).next(); 
 
    $('.description').not($desc).slideUp('fast'); 
 
    $(this).next().slideToggle("fast"); 
 
    $(this).siblings('.imageholder').css({opacity: 0.2}); 
 
},function(){ 
 
    $(this).siblings().css({opacity: 1}); 
 
});

.description { 
 
    display: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="imageswrapper"> 
 
</div> 
 
<div class="imageholder"> 
 
    <img class="img" src="http://placehold.it/350x150" alt="Placeholder"> 
 
</div> 
 
<div class="description"> 
 
    <p>Text</p> 
 
</div> 
 
<div class="imageholder"> 
 
    <img class="img" src="http://placehold.it/350x150" alt="Placeholder"> 
 
</div> 
 
<div class="description"> 
 
    <p>Text</p> 
 
</div> 
 
<div class="imageholder"> 
 
    <img class="img" src="http://placehold.it/350x150" alt="Placeholder"> 
 
</div> 
 
<div class="description"> 
 
    <p>Text</p> 
 
</div> 
 
</div>

Answer 2

$(this).siblings().css({opacity: 0.5})を追加してみることはできますか？ここで不透明度を探しているとは思えません。アルファではなく白黒のフィルタです。

Answer 3

あなたがそうのようなjQueryのセレクタから現在の要素を除外することができます：ここで

$('.imageholder').not(this) 

がフェードアウト画像を表示フィドルだ（あなたはバックアップするときに、マウスをそれらをフェードアウトする必要があります）： https://jsfiddle.net/euphemus/bdfv9vg8/3/