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

本文介绍了在悬停条件下突出显示多个项目的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

好的，对不起标题，不太确定如何使用。

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.

也许图片会更有意义。

所以蓝色是悬停，当你悬停在$ 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.

谢谢you：]

编辑：谢谢您的所有提示。我已经用css3完成了项目：not

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

后退将是JS

推荐答案

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

I will give a rather simple solution.

给每个box类的价格，应该是不透明的。喜欢

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

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

然后，在价格链接上使用classname作为 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); });