Simple multihighlight

by orrinward

HTML

<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item green"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item blue"></div>
<div class="item blue"></div>
<div class="item green"></div>
<div class="item red"></div>
<div class="item red"></div>

CSS

.item{opacity:0.4;width:100px;height:100px;margin:10px;float:left;}
.red{background:#f00;}
.green{background:#0f0;}
.blue{background:#00f;}
.highlight{opacity:1;}

JavaScript

$('.red').hover(function(){
    $('.red').toggleClass('highlight');
});

$('.blue').hover(function(){
    $('.blue').toggleClass('highlight');
});

$('.green').hover(function(){
    $('.green').toggleClass('highlight');
});