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

Question

我的设置看起来有点像这样：

http://jsfiddle.net/NhAuJ/

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

如何解决此类问题？

Answer 1

据我所知，实现这一目标的唯一方法是使用html5 canvas。 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;
}

它不会完全解决问题，但它会改善它。或者使用canvas作为Slave说。