Круглый DIV эффект при наведении

Здравствуйте, есть код:

Индекс волшебства ТВ-1


Крестик и Вампир ТВ-1


Всадник без головы / Durarara!



.nng {
position: relative;
vertical-align: top;
border: 5px solid rgba(255, 187, 134, 0.6);
margin: 5px auto 5px;
border-radius: 50%;
-khtml-border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
height:120px;
width: 120px;
right: 5px;
}
.nng:hover {
border: 5px solid rgb(255, 187, 134);
}
.nng a {
-webkit-border-radius: 50%;
border-radius: 50%;
-khtml-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
}

a tatan{
width: 100px;
height: auto;
line-height: 20px;
padding: 10px;
left: 50%;
margin-left: -64px;
font-family: Arial, serif;
font-weight: 400;
font-style: italic;
font-size: 14px;
color: rgb(255, 255, 255);
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
text-align: center;
border: 4px solid rgba(255, 255, 255, 0);
background: rgba(0, 0, 0, 0.7);
border-radius: 5px;
position: absolute;
pointer-events: none;
bottom: 100px;
opacity: 0;
box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
text-decoration:none;
}
tatan:before, tatan:after{
content: '';
position: absolute;
bottom: -15px;
left: 50%;
margin-left: -9px;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid rgba(0,0,0,0.1);
}
a tatan:after{
bottom: -14px;
margin-left: -10px;
border-top: 10px solid rgba(0, 0, 0, 0.7);
}
a:hover tatan{
opacity: 0.9;
bottom: 130px;
}


Вот как он работает: http://invenire.ru/krug.html

Не получается сделать чтобы он реагировал только при наведении на сам круг а не на область квадрата.. .В FireFox все нормально, а вот в остальных не работает.. .

Как это исправить? помогите пожалуйста)))

Блин, они сгенерировались ((( Короче вот полный вопрос [ссылка заблокирована по решению администрации проекта]