悬停在重叠的CSS3形状上

好吧我有一个潜在的棘手问题，即与通过CSS3创建的形状进行交互。请参阅下小提琴：http://jsfiddle.net/MH4LN/1/悬停在重叠的CSS3形状上

代码示例：

<div class="container"> 
    <div class="l1"></div> 
    <div class="l2"></div> 
    <div class="l3"></div> 
</div>

与下面的CSS：

.container { 
    width: 570px; height: 570px; 
    position: relative; 
} 
.l1 { 
    width: 352px; 
    height: 352px; 
    background: red; 

    position: absolute; 
    top: 109px; 
    left: 109px; 
    z-index: 999; 

    -webkit-border-radius: 176px; 
    border-radius: 176px; 
} 
.l2 { 
    width: 464px; 
    height: 464px; 
    background: blue; 

    position: absolute; 
    top: 53px; 
    left: 53px; 
    z-index: 998; 

    -webkit-border-radius: 232px; 
    border-radius: 232px; 
} 
.l3 { 
    width: 570px; 
    height: 570px; 
    background: green; 

    position: absolute; 
    z-index: 997; 

    -webkit-border-radius: 285px; 
    border-radius: 285px; 
} 

.l1:hover, .l2:hover, .l3:hover { 
    background: #fff; 
}

我的问题是这样的：我想申请的CSS悬停每个形状。通过将边框半径设置为等于div宽度/高度的一半（创建一个圆形）来创建形状。但是，当您将鼠标悬停在半径隐藏的空白区域上时，您仍然会在该元素上触发悬停状态。下面就来说明我的意思的图像：

Sad hover makes me sad.

有什么办法避免这种情况？我需要使用canvas元素而不是简单的圆角div吗？

编辑：看起来这是特定于WebKit浏览器，因为它在Firefox中正常工作。

编辑2：我接受Niels的解决方案，因为他是正确的，盒子模型规定元素是矩形，所以我这样做的方式是错误的。但是，我能够用SVG完成我所需的工作。这里有一个例子小提琴的情况下，任何人有兴趣：http://jsfiddle.net/uhrHX/1/

来源

2013-04-12 Ian

这是特定于某个浏览器吗？这个例子适用于FF。 –

看起来像是特定于WebKit。问题出现在Safari和Chrome中。 – Ian

这是因为元素本身仍然是一个正方形/矩形，基本上边界半径组件是透明的。没有纯粹的CSS方式来处理这个问题，而不涉及大量不必要的HTML和CSS标记。顺便说一句，一个更简单的方法来做一个圆是'border-radius：50％;'....只是一个旁注。 – PlantTheIdea

的CSS标准没有在2级也不3.所有他们下定义这种行为是：

：hover伪类适用，而用户用指针设备指定元素，但不一定激活它。例如，当光标（鼠标指针）悬停在元素生成的框上时，可视用户代理可以应用此伪类。

CSS盒模型隐式指出所有块元素都形成矩形框。就像文本不会以循环的方式浮在你的div上一样，出于所有的意图和目的，你的圆形在布局上仍然是矩形的，而在Webkit中则是行为。壁虎开发者显然已经花了更多的时间去尊重边界半径，但实际上这并不一致，因为他们不会在背景等等的“缺口”上做这件事，它们本质上也只是像边界半径一样的视觉变化。

总之，不要指望浏览器行为在这方面发生变化，因为CSS标准没有定义行为。正确实现跨浏览器的唯一方法是使用Javascript和一些智能的毕达哥拉斯计算鼠标位置。

来源

2013-04-12 20:23:03

悬停在重叠的CSS3形状上

回答

相关问题