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

Я пытаюсь обнаружить событие mouseover на круге. Я определяю круг 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'});
});

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

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

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

Ответ 1

Просто игнорируйте событие mouseover, если позиция мыши находится слишком далеко. Это очень просто. Возьмите центральную точку div и вычислите расстояние до указателя мыши (формула расстояния = sqrt((x2 - x1)^2 + (y2 - y1)^2)), и если она больше радиуса круга (половина ширины div), она еще не в круге.

Ответ 2

Нет, нет. Подумайте в геометрической форме. Вы все еще используете div, который является элементом ящика. Этот элемент окна имеет определенную прямоугольную границу, которая запускает мышь над событием. Использование CSS для обеспечения округленной границы только косметическое и не изменяет прямоугольную границу этого элемента.

Ответ 3

Возможно, вы можете сделать что-то подобное со старомодной картинной картой - там круглая область.
На самом деле этот плагин может вам помочь: jQuery MapHilight Plugin

Ответ 4

Если вы хотите, чтобы это работало так, как вы планируете, это потребует значительных вычислений. Всякий раз, когда мышь вводится в объект, вам нужно будет сначала выяснить, имеют ли закругленные углы (принимая во внимание разные браузеры), а затем вычисляют, действительно ли курсор находится внутри этих углов, и если это так, примените класс зависания.

Не кажется, что это стоит того, чтобы все проблемы.

Ответ 5

Вот snnipet для вычисления расстояния между двумя точками (центр круга и mouseX/mouseY) с помощью Javascript: http://snipplr.com/view/47207/