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

2022-01-22 00:00:00 hover javascript css

好吧抱歉标题，不太清楚如何表达它.

Okay sorry for the title, wasn't too sure how to phrase it.

所以我们有一个项目正在进行，并且我们根据人们捐赠的内容提供多种激励措施(类似于 Kickstarter，如果你知道那是什么的话).

So we have a project going, and we are offering multiple incentives depending on what people donate (similar to Kickstarter if you know what that is).

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

Anyway, what we have ben trying to figure out is when someone hovers on one price range we want the items they will receive to have full opacity, and then the same for the further down donation values.

也许图片会更有意义..

Maybe the image will make more sense..

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

So the blue is the hover, and when you hover over the "$1+", items 1, 3, 4 are opaque. But when you hover over the "$15+" only items 1, 3 are opaque.

大约有 20 种商品，15 个价格等级，所有这些都相互关联.

There are around 20 items, and 15 price brackets, all in which are interlinked with one another.

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

I assume this has to be one in JS, something I know nothing about.

谢谢你:]

谢谢你的所有提示.我已经用 css3 完成了这个项目:不是

Thank you for all the tips. I have completed the project with the css3 :not

而后备将是 JS

推荐答案

我会给出一个比较简单的解决方案.

I will give a rather simple solution.

给每个盒子的价格类别，其中应该是不透明的.有点像

Give every boxes classes of price where should be opaque on. Kinda like

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

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

Then, on your price links use the classname as the id for the specific links

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

然后使用

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

相关文章