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/）

你可以试试这个：

＆＃13;

 $('.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});
 });

＆＃13;

.description {
  display: none;
}

＆＃13;

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

＆＃13;

Answer 2

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

Answer 3

您可以从jQuery选择器中排除当前元素，如下所示：

var data = [[ 12, 14, 13, 10 ], [ 11, 13, 12, 2 ], [ 18, 12, 3, 4 ]];
console.log(data.map(function(item){
      return item.reduce( ( prev, current ) => prev + current , 0 ) / item.length;
}));

这里有一个小提示，显示图像淡出（当你鼠标移出时，你必须将它们淡出来）：https://jsfiddle.net/euphemus/bdfv9vg8/3/

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

3 个答案: