7

サークルでマウスオーバーイベントを検出しようとしています。サークルdivを次のように定義します。

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

次に、次のようにjQueryを使用してマウスオーバーを検出します。

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

これは、80px x80pxの領域全体がマウスオーバーイベントをトリガーすることを除いて、うまく機能します。つまり、マウスが表示されている円の上にない場合でも、divの右下隅に触れるだけでマウスオーバーイベントがトリガーされます。

円形領域でのみマウスオーバーイベントをトリガーする簡単でjqueryに適した方法はありますか？

更新：この質問のために、ブラウザーがCSS3対応であり、境界半径を正しくレンダリングすると仮定しましょう。マウスが円に入ったかどうかを検出するための簡単な方程式を考え出すための狂った数学/幾何学のスキルを持っている人はいますか？さらに簡単にするために、それが円であり、任意の境界半径ではないと仮定しましょう。

4

5 に答える 5

17

マウスの位置が離れすぎている場合は、mouseoverイベントを無視してください。とても簡単です。divの中心点を取り、マウスポインターまでの距離を計算し（距離式= sqrt((x2 - x1)^2 + (y2 - y1)^2)）、円の半径（divの幅の半分）よりも大きい場合は、まだ円内にありません。

于 2010-01-05T14:09:15.487 に答える
4

いいえ、ありません。幾何学的な言葉で考えてください。ボックス要素であるdivをまだ使用しています。そのボックス要素には、マウスオーバーイベントをトリガーする特定の長方形の境界があります。丸みを帯びた境界線を提供するためのCSSの使用は表面的なものであり、その要素の長方形の境界線を変更するものではありません。

于 2010-01-05T13:58:06.573 に答える
2

昔ながらの画像マップを使用すると、おそらくそのようなことができます。円形の領域があります。
実際、このプラグインはあなたを助けることができます：jQueryMapHilightプラグイン

于 2010-01-05T14:09:48.153 に答える
0

それを意図したとおりに機能させたい場合は、かなりの量の計算が必要になります。マウスがオブジェクトに入るときはいつでも、最初にオブジェクトが丸みを帯びているかどうかを確認し（さまざまなブラウザを考慮して）、次にカーソルが実際にそれらの角の内側にあるかどうかを計算し、丸みを帯びている場合はホバークラスを適用する必要があります。

しかし、すべてのトラブルの価値があるようには見えません。

于 2010-01-05T14:04:24.220 に答える
0

これは、Javascriptを使用して2つのポイント（円の中心とmouseX / mouseY）の間の距離を計算するためのスニペットです：http ：//snipplr.com/view/47207/

于 2013-07-25T20:26:46.567 に答える