Точно определить событие при наведении курсора на 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 и правильно отображает радиус границы. Есть ли у кого-нибудь безумные математические / геометрические навыки, чтобы придумать простое уравнение, чтобы определить, вошла ли мышь в круг? Чтобы сделать это еще проще, давайте предположим, что это круг, а не произвольный радиус границы.