css hover multiple elements

HTML

<div id="item1" class="items p1 p15">Item 1</div>
<div id="item2" class="items p5 p15">Item 2</div>
<div id="item3" class="items p15">Item 3</div>
<div id="item4" class="items p1 p5">Item 4</div>
<a class="price" id="p1">$1+</a>
<a class="price" id="p5">$5+</a>
<a class="price" id="p15">$15+</a>

CSS

.items { opacity: 0.4; padding: 20px; color: #fff; background: #000; width: 50px; height: 30px; float: left; margin: 5px;  }

JavaScript

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