Question

这有点难以解释，但我想要实现的是将类/ 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
});

Live jsFiddle example here.

Answer 2

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

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

从那里你可以使用jQuery的animate函数让它们改变它们的不透明度。

有关非选择器的更多信息，请访问jQuery API网站。

Answer 3

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

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

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

Jquery悬停状态依赖于类名

3 个答案: