Ich versuche, ein Mouseover-Ereignis auf einem Kreis zu erkennen. Ich definiere den Kreis div wie folgt:

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

Dann erkenne ich den Mauszeiger mit jQuery wie folgt:

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

Dies funktioniert gut, mit der Ausnahme, dass der gesamte 80 x 80 Pixel große Bereich das Mouseover-Ereignis auslöst. Mit anderen Worten, das Berühren der unteren rechten Ecke des Div löst das Mouseover-Ereignis aus, obwohl sich die Maus nicht über dem sichtbaren Kreis befindet.

Gibt es eine einfache und benutzerfreundliche Möglichkeit, das Mouseover-Ereignis nur im kreisförmigen Bereich auszulösen?

Update: Um diese Frage zu beantworten, nehmen wir an, dass der Browser CSS3-fähig ist und den Rahmenradius korrekt darstellt. Hat jemand die verrückten mathematischen / geometrischen Fähigkeiten, um eine einfache Gleichung zu finden, um festzustellen, ob die Maus den Kreis betreten hat? Nehmen wir zur Vereinfachung an, es handelt sich um einen Kreis und nicht um einen willkürlichen Rahmenradius.