Estoy tratando de detectar un evento mouseover en un círculo. Defino el círculo div así:

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

Entonces detecto el ratón utilizando jQuery así:

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

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

¿Existe una forma sencilla y sencilla de activar el evento de 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 de borde correctamente. ¿Alguien tiene las habilidades de matemáticas / geometría locas para llegar a una ecuación simple para detectar si el mouse ha entrado en el círculo? Para hacerlo aún más simple, supongamos que es un círculo y no un radio de borde arbitrario.