javascript - :hover {cursor:pointer} は、borderradius を介して作成された円の上にあり、円の外側でもポインターになります。

Question

border-radius を使用して円ボタンを作成しました。私の問題は、次のコードを使用する場合です。 button:hover {cursor: pointer}カーソルは、円の外側でもポインターになります（ただし、「長方形のdiv」の内側）。これを解決するにはjavascriptが必要だと確信しています（間違っている場合に備えてCSSタグを含めました）が、それ以外は空白です。誰かが私を正しい方向に向けることができれば、それは素晴らしいことです!

ありがとう。

Answer 1

そのためにSVGを使用できます。SVG はクロスブラウザ対応です。

<svg>
    <circle cx="40" cy="40" r="24"/>
</svg>

circle:hover{
    cursor: pointer;
    background: yellow;
}

デモ: http://jsfiddle.net/DerekL/Jpnre/
MDN: https://developer.mozilla.org/en/CSS/Getting_Started/SVG_graphics