javascript - :hover { cursor: pointer } 在通过borderradius创建的圆上将使其成为即使在圆外的指针

Question

我使用边框半径创建了一个圆形按钮。我的问题是，当使用以下代码时： 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