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

Question

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

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Хотя, похоже, не стоит всех хлопот.