Использование JQuery, чтобы уменьшить непрозрачность других элементов с DIV

Question

У меня есть блок изображений с подписями и я использую slideToggle, чтобы показать и скрыть субтитры:

$('.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/