Con jquery es muy sencillo
haces un evento de hover y le añades una clase de opacidad, te dejo un ejemplo que te he creado:
Código:
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<style>
span
{
cursor:pointer;
}
.azul
{
height:100px;
width:100px;
background:blue;
}
.verde
{
height:100px;
width:100px;
background:green;
}
.rojo
{
height:100px;
width:100px;
background:red;
}
.opacidad
{
opacity:0.1;
}
</style>
<script>
$(document).ready(function(){
$('span').hover(function(){
$('div:not(.'+$(this).text()+')').addClass("opacidad");
},function(){
$('div').removeClass("opacidad");
});
})
</script>
<div class="azul"></div>
<div class="verde"></div>
<div class="rojo"></div>
<span>rojo</span>
<span>verde</span>
<span>azul</span>
es fundamental añadir la libreria jquery, tenemos 3 clases y una de opacidad,
cuando nos ponemos encima del div ponemos a todos los que no tienen la clase del span la clase opacidad y cuando te sales del hover le kitamos a todos los div la clase.
espero que te sirva.
un saludo!