Próbuję wykryć zdarzenie mouseover w okręgu. Definiuję koło div w ten sposób:

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

Następnie wykrywam mousover używając jQuery w ten sposób:

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

Działa to dobrze, z wyjątkiem tego, że cały obszar 80px na 80px uruchamia zdarzenie mouseover. Innymi słowy, dotknięcie prawego dolnego rogu div wywołuje zdarzenie mouseover, nawet jeśli mysz nie znajduje się nad widocznym okręgiem.

Czy istnieje prosty i przyjazny dla jquery sposób wyzwalania zdarzenia mouseover tylko w obszarze kołowym?

Aktualizacja: Dla tego pytania załóżmy, że przeglądarka obsługuje CSS3 i poprawnie renderuje promień obramowania. Czy ktoś ma szalone umiejętności matematyczne / geometryczne, aby wymyślić proste równanie do wykrywania, czy mysz weszła do kręgu? Aby uczynić to jeszcze prostszym, załóżmy, że jest to okrąg, a nie dowolny promień granicy.