Detecte com precisão o evento MouseOver para uma div com cantos arredondados

Question

Estou tentando detectar um evento MouseOver em um círculo. Eu defino o círculo divi como este:

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

Então eu detecto o MousOver usando jQuery como este:

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

Isso funciona bem, exceto que a área inteira de 80px por 80px desencadeia o evento MouseOver. Em outras palavras, apenas tocar no canto inferior direito da div desencadeia o evento MouseOver, mesmo que o mouse não esteja acima do círculo visível.

Existe uma maneira simples e amigável de acionar o evento MouseOver apenas na área circular?

ATUALIZAÇÃO: Para o bem desta pergunta, vamos supor que o navegador seja capaz de CSS3 e renderize o radiato da fronteira corretamente. Alguém tem as habilidades loucas de matemática/geometria para criar uma equação simples para detectar se o mouse entrou no círculo? Para simplificar ainda mais, vamos supor que seja um círculo e não um raio de fronteira arbitrária.

Answer 1

Basta ignorar o evento MouseOver se a posição do mouse estiver muito longe. É realmente simples. Pegue o ponto central da div e calcule a distância ao ponteiro do mouse (fórmula de distância = sqrt((x2 - x1)^2 + (y2 - y1)^2)) e se for maior que o raio do círculo (metade da largura da div), ainda não está no círculo.

Answer 2

Não, não há. Pense em termos geométricos. Você ainda está usando uma div, que é um elemento de caixa. Esse elemento da caixa possui um limite retangular específico que desencadeia o evento de mouse sobre o evento. O uso de CSS para fornecer uma borda arredondada é apenas cosmético e não altera o limite retangular desse elemento.

Answer 3

Você provavelmente pode fazer algo assim com um mapa de imagens à moda antiga - há uma área circular.
De fato, este plugin pode ajudá -lo: JQuery Maphilight Plugin

Answer 4

Se você quiser fazer isso funcionar como pretende fazer, exigiria uma quantidade considerável de cálculos. Sempre que um mouse entra em um objeto, você precisaria primeiro descobrir se ele tem cantos arredondados (levando em consideração diferentes navegadores), depois calcule se o cursor realmente está dentro desses cantos e, se for, aplique uma classe de pairar.

Não parece valer a pena todo o problema, no entanto.

Answer 5

Aqui está um snnipet para calcular a distância de dois pontos (o centro do círculo e o Mousex/Mousey) usando JavaScript: http://snipplr.com/view/47207/