Tôi đang cố gắng phát hiện sự kiện di chuột trên một vòng tròn. Tôi xác định div vòng tròn như thế này:Phát hiện chính xác sự kiện di chuột cho một div có góc tròn
.circle {
width: 80px;
height: 80px;
-moz-border-radius: 40px;
-webkit-border-radius: 40px;
background-color: #33f;
}
Sau đó, tôi phát hiện ra sự mousover sử dụng jQuery như thế này:
$('.circle').mouseover(function() {
$(this).css({backgroundColor:'#f33'});
});
này hoạt động tốt, ngoại trừ việc toàn bộ 80px 80px bởi khu vực gây nên sự kiện mouseover. Nói cách khác, chỉ cần chạm vào góc dưới cùng bên phải của div sẽ kích hoạt sự kiện di chuột, ngay cả khi chuột không nằm trong vòng tròn hiển thị.
Có cách nào thân thiện và đơn giản để kích hoạt sự kiện di chuột trong vùng hình tròn không?
Cập nhật: Vì lợi ích của câu hỏi này, hãy giả sử rằng trình duyệt có khả năng CSS3 và hiển thị chính xác bán kính đường viền. Có ai có kỹ năng toán học/hình học điên để đưa ra một phương trình đơn giản để phát hiện liệu con chuột đã đi vào vòng tròn chưa? Để làm cho nó đơn giản hơn, hãy giả sử rằng nó là một hình tròn và không phải là bán kính biên giới tùy ý.
Demo: http : //jsbin.com/oqewo (nguồn xem) –