Detecta con precisión el evento mouseover para un div con esquinas redondeadas

Question

Estoy intentando detectar un evento mouseover en 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; 
} 

Entonces detectar la mousover usando jQuery así:

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

Esto funciona bien, excepto que todo el 80px por 80px área activa el evento mouseover. En otras palabras, solo tocar la esquina inferior derecha de div activa el evento mouseover, aunque el mouse no esté sobre el círculo visible.

¿Hay una forma simple y sencilla de activar el evento mouseover solo en el área circular?

Actualización: Por el bien de esta pregunta, supongamos que el navegador es capaz de CSS3 y representa el radio del borde correctamente. ¿Alguien tiene las habilidades locas de matemáticas/geometría para llegar a una ecuación simple para detectar si el mouse ha ingresado al círculo? Para hacerlo aún más simple, supongamos que es un círculo y no un radio de borde arbitrario.

Answer 1

Simplemente ignore el evento mouseover si la posición del mouse está muy lejos. Es realmente simple. Tome el punto central del div, y calcule la distancia al puntero del mouse (fórmula de distancia = sqrt((x2 - x1)^2 + (y2 - y1)^2)) y si es más grande que el radio del círculo (la mitad del ancho del div), aún no está en el círculo.

Answer 2

No, no lo hay. Piensa en términos geométricos. Todavía estás usando un div, que es un elemento de caja. Ese elemento de cuadro tiene un límite rectangular específico que desencadena el mouse sobre el evento. El uso de CSS para proporcionar un borde redondeado es solo cosmético y no cambia el límite rectangular de ese elemento.

Answer 3

Si desea que funcione como lo desea, requerirá una cantidad considerable de cálculos. Siempre que un mouse entre en un objeto, primero debe averiguar si tiene esquinas redondeadas (teniendo en cuenta diferentes navegadores), luego calcular si el cursor realmente está dentro de esas esquinas, y si lo es, aplicar una clase de vuelo estacionario.

Aunque no parece que valga la pena todo el problema.

Answer 4

Probablemente pueda hacer algo como eso con un mapa de imagen antiguo: hay un área circular.
De hecho, este plugin puede ayudar a: jQuery MapHilight Plugin

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/