Multi Selective Hover Not Working

Multi Selective Hover Not Working

Alright so well i had already asked a question about multi hover and i got
a jquery answer so when i was fixing everything up on the code i
integrated the jquery code and well it doesn't work that well. What i was
trying to do is when i hover over the box, the box has to have a box
shadow and the text on the right has to become bold or different color and
vice versa and well idk what i did wrong but the jquery code isnt working
correctly so i wanted to know what was the mistake thanks in advance.
heres the jquery:
$('#a').hover(function(){
$('#a').css('box-shadow','1px 3px');
$('#b').css('color','blue');
}, function(){
$('#a').css('box-shadow','none');
$('#b').css('color','red');
})
$('#b').hover(function(){
$('#a').css('box-shadow','1px 3px');
$('#b').css('color','blue');
}, function(){
$('#a').css('box-shadow','none');
$('#b').css('color','red');
})
heres the code: http://jsfiddle.net/gtdGU/1/