Точно определить событие при наведении курсора на 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 ответов
Просто игнорируйте событие наведения мыши, если положение мыши слишком далеко. Это действительно просто. Возьмите центральную точку div и вычислите расстояние до указателя мыши (формула расстояния = sqrt((x2 - x1)^2 + (y2 - y1)^2)
) и если он больше, чем радиус круга (половина ширины элемента div), он еще не находится в круге.
Нет, нет Думайте в геометрических терминах. Вы все еще используете div, который является элементом box. Этот элемент box имеет определенную прямоугольную границу, которая запускает событие мыши. Использование CSS для предоставления скругленной границы носит исключительно косметический характер и не меняет прямоугольную границу этого элемента.
Вы, вероятно, можете сделать что-то подобное со старомодной картой изображений - там есть круглая область.
На самом деле, этот плагин может помочь вам: плагин jQuery MapHilight
Если вы хотите, чтобы это работало так, как вы собираетесь, это потребует значительного количества вычислений. Всякий раз, когда мышь входит в объект, вам сначала нужно выяснить, имеет ли он закругленные углы (с учетом различных браузеров), а затем вычислить, действительно ли курсор находится внутри этих углов, и, если это так, применить класс наведения.
Хотя, похоже, не стоит всех проблем.
Вот фрагмент кода для вычисления расстояния между двумя точками (центр круга и mouseX/mouseY) с использованием Javascript: http://snipplr.com/view/47207/