徘徊在圆角元素上

Question

说一个有一个div，我绕过它的角落，所以它变成了一个圆圈。现在，我想将:hover伪元素应用于它。但我有其他元素围绕它，反过来又有:hover效果。如果鼠标在圆圈内有效，我只想激活圆圈的悬停效果。

为了说明这个问题：

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

如何（如果可以的话）解决这个问题？

Answer 1

我在Chrome，Opera，Firefox，IE和Safari的最新版本上做了little test;除了Opera *之外，浏览器似乎可以按照您的意愿工作。

Opera没有，这是由于浏览器实现错误，应该归档为bug。 specs在这一点上非常明确：

  

此外，边框边缘曲线外的区域不会代表元素接受指针事件。

<子> P.S。 （：hover是伪类，而不是伪元素）

_{*当我最初发布这篇文章时，我在 Linux 上测试了最新版Opera的问题，目前这是12.16。如King King pointed out below，这不是其他操作系统上的最新版本，测试工作正常。}

Answer 2

如果您能够使用SVG，您的元素将是您定义的任何内容，并且它受您的规格的边框形状/大小的限制。所以在你的情况下，你可以做一个这样的事情：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
    <line x1="50" y1="50" x2="50" y2="50" stroke="red" class="circle" />
</svg>

然后使用css设置样式：

.circle:hover {
    stroke: blue
}

jsfiddle