Jquery 悬停状态取决于类名

Question

解释起来有点困难，但我想要实现的是将一个 class / css 应用于一组具有相同类名的 div。具体来说，它将是一个显示缩略图的图库。它们都一起出现，但按类名分组。当您将鼠标悬停在特定类别的图像上时，具有同一类别的所有图像将保持不透明，而其余图像则更改其不透明度。也许这可以通过更改覆盖 div 的显示来实现？

所以本质上我需要某种方式以相同的方式显示具有相同类的 div，而不管它们悬停时的类名是什么。

如果有人能指出我正确的方向，我将非常感激！

例如（当鼠标悬停在 1 类中的任一个上时，它们是不透明的，而 2 类是透明的，反之亦然）：

<div class="thumbnail 1">
<img>
</div>
<div class="thumbnail 1">
<img>
</div>
<div class="thumbnail 2">
<img>
</div>
<div class="thumbnail 2">
<img>
</div>

Answer 1

您可以使用 jQuery 轻松完成此操作。该代码适用于任何元素和类组；你不需要提前知道课程内容。它只是找到所有不具有您所悬停的元素的类的元素，并将它们变暗。

如果这是您的 HTML：

<span class="a">a</span>
<span class="a">b</span>
<span class="a">c</span>
<span class="b">d</span>
<span class="b">e</span>
<span class="b">f</span>

...那么，这个 jQuery 应该可以正常工作。

$('span').hover(function() {
    var theClass = $(this).attr('class');
    $('span:not(.' + theClass + ')').animate({'opacity': 0.2}, 300);
}, function() {
    $('span').animate({'opacity': 1}, 300); //restore all spans to 100% opacity
});

这里是 jsFiddle 的实时示例。

Answer 2

应该很容易做到。无需为您编写整个函数，选择器很简单：

$('div.hoverclass').hover(function() { 
  // any other logic you need to sort out
  $('img.imageclass').not('.hoverclass').doOpacityStuff();
});

其中“hoverclass”是 div 组及其各自图像共享的类，“imageclass”是所有具有此悬停功能的图像共享的类（这样您就不需要不会影响您的其他图标和不相关的图像），并且“doOpacityStuff()”是您可以链接其他不透明度函数的点。

Answer 3

由于您的类是动态生成的，因此您首先需要获取当前元素的类，然后如果您想对不属于某个类的元素执行某些操作：

$('div').hover(function () {
  // Get the class
  var selector = $(this).attr('class');
  $('div:not(' + selector + ')').each( function () {
    //...
  });
}); 

从那里您可以使用 jQuery 的 animate 函数来更改它们他们的不透明度。

有关 not-selector 的更多信息，请访问 jQuery API 网站。