jquery - работа с одинаковыми классами

[tp-20]

сначала суть. потом код.
Суть: есть элементы с одинаковым классом.
нужно чтобы при наведении на один из блоков появлялся чёрный квадрат именно у текущего блока, на который я навёл.
сейчас при наведении на любой из блоков, появляются сразу все чёрные квадраты.

пример тут - http://jsfiddle.net/prx2ft8a/
Есть блок с элементами

<div>
        <div class='main_block'>
            <div class='hidden_block'></div>
        </div>
        <div class='main_block'>
            <div class='hidden_block'></div>
        </div>
        <div class='main_block'>
            <div class='hidden_block'></div>
        </div>
        <div class='main_block'>
            <div class='hidden_block'></div>
        </div>
    </div>

стили к нему:

.main_block{
  display:inline-block;
  width:100px;
  height:100px;
  margin:10px;
  background:red;
  cursor:pointer;
}
  
.hidden_block{
  display:none;
  width:30px;
  height:30px;
  margin:auto;
  background:black;
}

и jquery

$(document).ready(function(){
    $('.main_block').hover(function(){
        $('.hidden_block').fadeIn(500).css('display','block');
    }, 
    function(){
        $('.hidden_block').fadeOut(200);
    });
});

http://prntscr.com/pzz8x9
заранее спасибо всем откликнувшимся!

[laimas]

А на CSS? Ведь достаточно его.

PS. Кстати, .css('display','block');, лишнее.

[tp-20]

А на CSS? Ведь достаточно его.

да точно. чёто я решил пойти сложным путём ))
спасибо

[рони]

tp-20,
лучше css, но можно так

$(function(){
    $('.main_block').hover(function(){
        $('.hidden_block', this).fadeIn(500);
    },
    function(){
        $('.hidden_block', this).fadeOut(200);
    });
});