css - クリックまたはホバー時の CSS サークルの動作

Question

私はサークルを持っています：

HTML:

<div id="quadrant-sizer"></div>

CSS:

#quadrant-sizer {
    width: 40px;
    height: 40px;
    border-radius: 999px;
}

私の問題は、マウスが円の外側にあるが、ボックスの高さと幅の範囲内にある場合、マウスが円の上にあるかのように動作することです。基本的に、マウスが円の上にない場合、円の上にあるかのように動作するべきではありません。HTML/CSS でできない場合、JavaScript でそれを行う方法はありますか?

score 3 · Accepted Answer

CSS ルールを次のように変更するとどうなりますか。

#quadrant-sizer {
    width: 40px;
    height: 40px;
    border-radius: 50%; /* here */
}

アップデート：

いずれにせよ、ブラウザ/バージョンの問題である可能性が最も高いです。Canary 30 では動作するようですが、Chrome 27 および 28 では動作しません。Aurora 24 で動作します。

score 1 · Accepted Answer

JavaScriptでそれを行うことは、基本的にマウスがサークル内にあるかどうかを調べることです。この式を使用ここに画像の説明を入力して計算してください。

3 に答える 3