在圆角元素上悬停

Question

假设我有一个 div，我将其圆角化使其变成了一个圆形。现在，我想对它应用 :hover 伪元素。但是，我周围还有其他元素，这些元素本身具有 :hover 效果。如果鼠标实际上在圆形内部，我只希望激活圆形的悬停效果。

为了说明这个问题：

方块是我的 div，圆形是圆角处理后的样子。假设黑色区域在其他元素的前面，我也想能够使用它们的 :hover 效果。如果我将 hover 伪元素应用于圆形，当鼠标在黑色区域时，圆形的 hover 效果将被激活，而不是 div 后面元素的效果...

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

- obiwit

---

我不确定你期望什么？请查看这个fiddle http://jsfiddle.net/yfW5s/1/ - Karuppiah RK

你看，这个想法就是只有当我悬停在圆圈上时才会出现悬停效果，而不是在周围的正方形上...这样有帮助吗？ - obiwit

Answer 1

我对最新版本的Chrome、Opera、Firefox、IE和Safari做了一个小测试；除了Opera*，其他浏览器都能按照你的期望工作。

Opera不能正常工作，这是由于错误的浏览器实现造成的，应该将其报告为错误。 规格说明非常清楚：

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

_{P.S.（:hover是伪类，而不是伪元素）}

_{*当我最初发布这篇文章时，我在Linux上测试了最新版本的Opera，目前是12.16。正如King King在下面指出的那样，这不是其他操作系统上的最新版本，测试可以正常工作。}

- NinGen ShinRa

---

哇，这很有趣...经过非常仔细的代码检查，我认为我已经找到了问题所在：我正在使用百分比。因此，要制作一个圆形，我必须使用:before，例如.circle:before { content: ""; display: block; padding-top: 100%; /* ratio of 1:1 */ } 这是导致问题的原因吗？谢谢！ - obiwit

你能否在JSBin上展示一下你的案例？如果你愿意，你可以编辑我的测试。在你发布相关代码之前，我不确定你是如何实现的，但请记住，padding确实是元素的一部分，并接受指针事件。 - NinGen ShinRa

哦，先生/女士，您确实非常非常非常有知识 ;D 简单地说，我正在做这个：JSBin。用margin-top完全替换padding-top解决了问题！我不知道为什么我没有想到过！谢谢！ - obiwit

你为什么认为Opera在这里有一个bug？至少最新版本（21）以正常方式处理它，将鼠标悬停在方形角落只会改变“.behind”的背景颜色，而将鼠标悬停在圆圈上当然会改变“.circle”的背景颜色。它可以正常工作，没有任何错误。看起来你是在一些旧版本的Opera上测试它。顺便说一下，自从现在开始，如果Opera有一个bug，Chrome也有很高的机会出现同样的bug。现在Chrome和Opera在页面渲染方面非常相似。 - King King

最新版本在Linux上是12.16，那就是我测试的地方。下载你在Mac Os X上提到的版本确实可以正常工作。感谢你指出这一点。 - NinGen ShinRa

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

{{链接1：jsfiddle}}

- Sammy