Точно определить событие при наведении курсора на div с закругленными углами

Я пытаюсь обнаружить событие при наведении курсора на круг. Я определяю круг div следующим образом:

.circle {
  width: 80px;
  height: 80px;
  -moz-border-radius: 40px;
  -webkit-border-radius: 40px;
  background-color: #33f;
}

Затем я определяю mousover с помощью jQuery следующим образом:

$('.circle').mouseover(function() {
  $(this).css({backgroundColor:'#f33'});
});

Это работает хорошо, за исключением того, что вся область 80 на 80 пикселей вызывает событие наведения мыши. Другими словами, простое прикосновение к правому нижнему углу div вызывает событие mouseover, даже если мышь не находится над видимым кругом.

Есть ли простой и удобный для jQuery способ вызвать событие наведения мыши только в круглой области?

Обновление: ради этого вопроса давайте предположим, что браузер поддерживает CSS3 и правильно отображает радиус границы. Есть ли у кого-нибудь безумные математические / геометрические навыки, чтобы придумать простое уравнение, чтобы определить, вошла ли мышь в круг? Чтобы сделать это еще проще, давайте предположим, что это круг, а не произвольный радиус границы.

Ответы на вопрос(5)

Ваш ответ на вопрос