Detectar con precisión evento encima del ratón para un div con esquinas redondeadas

Question

Estoy tratando de detectar un evento al pasar el ratón sobre un círculo. Yo defino el div círculo de la siguiente manera:

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

A continuación, detecto la mousover usando jQuery como esto:

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

Esto funciona bien, excepto que toda la zona de 80px por 80px activa el evento mouseover. En otras palabras, sólo tocar la esquina inferior derecha de la div activa el evento mouseover, a pesar de que el ratón no está sobre el círculo visible.

¿Hay una manera sencilla y amigable jQuery para lanzar el evento mouseover en sólo en el área circular?

Actualización: Por el bien de esta pregunta, vamos a suponer que el navegador es capaz de CSS3 y hace que la frontera de radio correctamente. ¿Alguien tiene las matemáticas habilidades loco / Geometría para llegar a una ecuación simple para detectar si el ratón ha entrado en el círculo? Para hacerlo aún más sencillo, vamos a suponer que se trata de un círculo y no un radio de frontera arbitraria.

Answer 1

Simplemente ignorar el evento mouseover si la posición del ratón es demasiado lejos. Es muy simple. Tome el punto central de la div, y calcular la distancia al puntero del ratón (distancia fórmula = sqrt((x2 - x1)^2 + (y2 - y1)^2)) y si es mayor que el radio del círculo (la mitad de la anchura de la div), no es en el círculo todavía.

Answer 2

No, no lo hay. Pensar en términos geométricos. Usted todavía está utilizando un div, que es un elemento de caja. Ese elemento de caja rectangular tiene un límite específico que activa el puntero del ratón sobre evento. El uso de CSS para suministrar un borde redondeado es sólo cosmético, y no cambia el límite rectangular de ese elemento.

Answer 3

Puede probablemente hacer algo así con un antiguo mapa de imagen - hay un área circular
. De hecho, este plugin puede ayudarle a: jQuery Plugin MapHilight

Answer 4

Si usted quiere conseguir que el que trabajar como lo quiere hacer, que requeriría una considerable cantidad de cálculos. Cada vez que un ratón entra en un objeto, que tendría que averiguar primero si tiene las esquinas redondeadas (teniendo en cuenta los diferentes navegadores), a continuación, calcular si el cursor realmente está dentro de esos rincones, y si lo es, aplicar una clase de vuelo estacionario.

No parece como pena todo el problema, sin embargo.

Answer 5

Aquí es un snnipet para calcular la distancia betewwn dos puntos (el centro del círculo, y el mouseX / mouseY) usando Javascript: http://snipplr.com/view/47207/