在悬停条件下突出显示多个项目

Question

好吧，对不起，标题，不太确定如何措辞。

所以我们有一个项目正在进行中，我们根据人们的捐赠提供多种激励措施（类似于 Kickstarter，如果你知道那是什么）。

无论如何，我们一直试图弄清楚的是，当有人徘徊在一个价格范围内时，我们希望他们收到的物品完全不透明，然后对于进一步降低的捐赠价值也是如此。

也许图像会更有意义..

所以蓝色是悬停，当你悬停在“$1+”上时，项目 1、3、4 是不透明的。但是，当您将鼠标悬停在“$15+”上方时，只有第 1、3 项是不透明的。

大约有20个项目，15个价格区间，所有这些都相互关联。

我认为这必须是 JS 中的一个，我对此一无所知。

谢谢 ：]

编辑：谢谢你的所有提示。我已经用 css3 完成了这个项目：不是

后备将是 JS

Answer 1

我将给出一个相当简单的解决方案。

为每个盒子提供不透明的价格类别。有点像

<div id="item1" class="p1 p15">Item 1</div>

然后，在您的价格链接上使用类名作为id特定链接的

   <a class="price" id="p1">$1+</a>

然后使用

$(".price").mouseover(function() {
           $(".items").css("opacity", 0.4);
           id = $(this).attr('id');
           $("."+id).css("opacity", 1);
});

演示

演示 2包括样式