Точное обнаружение события наведения курсора мыши для элемента div с закругленными углами.

StackOverflow https://stackoverflow.com/questions/2006419

Вопрос

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

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

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

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

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

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

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

Это было полезно?

Решение

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

Другие советы

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

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

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

Однако, похоже, это не стоит всех хлопот.

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

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top