圆角周围的透明区域阻挡悬停

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>

然后在大圆上将指针事件设置为none，在小圆上将其设置为auto。

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

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