徘徊在圆角元素上

obi*_*wit 4 html css hover rounded-corners

假设有一个div,并且我绕过它的角落,所以它变成了一个圆圈.现在,我想将:hover伪元素应用于它.但是我有其他元素围绕它,而这反过来又产生了:hover效果.如果鼠标在圆圈内有效,我只希望激活圆圈的悬停效果.

为了说明这个问题:

在应用border-radius后划分为圆

广场是我的div,圆圈是它的角落.假装黑色区域位于其他元素的前面,:hover我也希望能够使用它们的效果.如果我将悬停伪元素应用于圆圈,当鼠标位于黑色区域时,圆圈的悬停效果将被激活,而不是div后面的元素之一...

如何(如果可以的话)解决这个问题?

Nin*_*nRa 6

我对最新版本的Chrome,Opera,Firefox,IE和Safari 进行了一些测试 ; 除了Opera*之外,浏览器似乎可以按照您的意愿工作.

Opera没有,这是由于浏览器实现错误,应该作为bug提交.在这一点上,规格非常明确:

此外,边界边缘曲线外的区域不接受代表元素的指针事件.

PS(:hover是伪类,不是伪元素)

*当我最初发布这篇文章时,我在Linux上最新版本的Opera上测试了这个问题,该版本目前是12.16.正如King King在下面指出的那样,这不是其他操作系统的最新版本,测试工作正常.