使用 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

您可以尝试添加 $(this).siblings().css({opacity: 0.5}) 吗，但我不认为您要在此处寻找不透明度，它更像是黑白滤镜而不是 alpha 滤镜。

Answer 2

您可以像这样从 jQuery 选择器中排除当前元素：

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

这里是 fiddle 显示淡出的图像（您必须在鼠标移开时将它们淡出）：https://jsfiddle.net/euphemus/bdfv9vg8/3/

Answer 3

使用悬停功能，您可以添加一个功能，当您没有悬停元素时，将不透明度恢复为 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>

使用 jQuery 减少其他元素的不透明度 div

Using jQuery to reduce opacity of other elements with a div

javascript

css

jquery

opacity