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

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

<div class="nng" style="background: url(http://invenire.ru/ru/img/animelog/index.jpg);">
<a class="tooltip" style="text-decoration:none; display:block; height:100%; text-align:center;" href="http://animevirt.fo.ru/wiki/121220_Anime/251216_%D0%98%D0%BD%D0%B4%D0%B5%D0%BA%D1%81+%D0%B2%D0%BE%D0%BB%D1%88%D0%B5%D0%B1%D1%81%D1%82%D0%B2%D0%B0+%D0%A2%D0%92-1"><tatan>Индекс волшебства ТВ-1</tatan>
</a>
</div>

<div class="nng" style="background: url(http://invenire.ru/ru/img/animelog/rosario+vampire.jpg);">
<a class="tooltip" style="text-decoration:none; display:block; height:100%; text-align:center;" href="http://animevirt.fo.ru/wiki/121220_Anime/258968_%D0%9A%D1%80%D0%B5%D1%81%D1%82%D0%B8%D0%BA%2B%D0%92%D0%B0%D0%BC%D0%BF%D0%B8%D1%80"><tatan>Крестик и Вампир ТВ-1</tatan>
</a>
</div>

<div class="nng" style="background: url(http://invenire.ru/ru/img/animelog/durarara!.jpg);">
<a class="tooltip" style="text-decoration:none; display:block; height:100%; text-align:center;" href="http://animevirt.fo.ru/wiki/121220_Anime/257110_%D0%92%D1%81%D0%B0%D0%B4%D0%BD%D0%B8%D0%BA+%D0%B1%D0%B5%D0%B7+%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D1%8B+%2F+Durarara%21"><tatan>Всадник без головы / Durarara!</tatan>
</a>
</div>

<style>
.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;
}
</style>

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

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

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

RPI.su - самая большая русскоязычная база вопросов и ответов. Наш проект был реализован как продолжение популярного сервиса otvety.google.ru, который был закрыт и удален 30 апреля 2015 года. Мы решили воскресить полезный сервис Ответы Гугл, чтобы любой человек смог публично узнать ответ на свой вопрос у интернет сообщества.

Все вопросы, добавленные на сайт ответов Google, мы скопировали и сохранили здесь. Имена старых пользователей также отображены в том виде, в котором они существовали ранее. Только нужно заново пройти регистрацию, чтобы иметь возможность задавать вопросы, или отвечать другим.

Чтобы связаться с нами по любому вопросу О САЙТЕ (реклама, сотрудничество, отзыв о сервисе), пишите на почту [email protected]. Только все общие вопросы размещайте на сайте, на них ответ по почте не предоставляется.