css - 圆角周围的透明区域阻止悬停

Question

我设置了一些看起来像这样的东西：

http://jsfiddle.net/NhAuJ/

问题是当您将鼠标悬停在圆圈的角落附近时，您无法将鼠标悬停在背景上，因为 div 是一个正方形并阻挡了它。我希望中间的圆形 div 是可点击的（我要在里面放一些东西），所以我不想阻止光标使用指针事件与它交互。

任何想法如何解决此类问题？

Answer 1

据我所知，实现这一目标的唯一方法是通过 html5 画布。http://jsfiddle.net/NhAuJ/3/

http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/

Answer 2

好吧，我有点想通了。对于任何坚持这一点的人，我能做的最好的就是有一个更大的圆圈，然后在更大的圆圈内放置另一个圆圈作为它的孩子，即

<div class="big-circle">
   <div class="small-circle">

   </div>
</div>

然后在大圆圈上将指针事件设置为无，在小圆圈上将其设置为自动。

.big-circle { 
   pointer-events: none;
}
.small-circle {
   pointer-events: auto;
}

它不会完全解决问题，但会改善它。或者像奴隶所说的那样使用画布。