Question

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

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..

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.

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

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

Thank you :]

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

And the fallback will be JS

Answer 1

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>

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

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

Then use the

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

Demo

Demo 2 Including the styles