将鼠标悬停在重叠的CSS3形状上 [英] Hovering on overlapping CSS3 shapes

问题描述

好吧，我有一个关于与通过CSS3创建的形状交互的一个可能棘手的问题。请参阅以下小提示： http://jsfiddle.net/MH4LN/1/

代码示例：

 < 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宽度/高度的一半（创建圆形）来创建形状。但是，当您将鼠标悬停在被半径隐藏的空白区域上时，您仍然会在该元素上触发悬停状态。下面的图片说明了我的意思：
 
 
 
  
 
 
 
有没有办法避免这种情况？我需要使用canvas元素来代替简单的圆形div吗？
 
 
 
编辑：看起来这是特定于WebKit浏览器，因为它在Firefox中正常工作。 p> 
 
 
编辑2：我接受Niels的解决方案，因为他是正确的，箱子模型指示元素是矩形，所以我的方式是错误的。但是，我能够完成我需要的SVG。这里有一个例子小提琴，以防任何人感兴趣： http://jsfiddle.net/uhrHX/1/ 
解决方案
 CSS标准没有在级别2或3中定义此行为。它们定义的是：
 
 
 hover伪类适用于用户使用指针设备指定元素，但不一定激活它。例如，当光标（鼠标指针）悬停在由该元素生成的框上时，可视用户代理可以应用此伪类。 
 
 
 CSS框模型隐式声明所有块元素都形成矩形框。正如文本不会以循环的方式围绕你的div，为所有的意图和目的你的圈子仍然是矩形的布局，和Webkit的行为。 Gecko开发者显然已经走了额外的英里来尊重边界半径为悬停，但是这是实际上是不一致的，因为他们不做的背景等差距，这本质上也只是视觉变化就像边界半径。
 
 
 
总之，不要指望浏览器的行为会改变，因为CSS标准没有定义行为。正确实现它的跨浏览器的唯一方法是使用Javascript和一些聪明的毕达哥拉斯计算鼠标位置。
 
Alright I have a potentially tricky question regarding interacting with shapes created via CSS3. See the following fiddle: http://jsfiddle.net/MH4LN/1/

Code example:
<div class="container">
    <div class="l1"></div>
    <div class="l2"></div>
    <div class="l3"></div>
</div>
with the following 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;   
}
My problem is this: I want to apply CSS to each shape on hover. The shapes are created by setting a border radius equal to half the div width/height (creating a circle). However when you hover over the empty area hidden by the radius, you still trigger a hover state on that element. Here's an image to illustrate what I mean:



Is there any way to avoid this? Will I need to use the canvas element for this instead of simple rounded divs?

Edit: Looks like this is specific to WebKit browsers as it works fine in Firefox.

Edit 2: I'm accepting Niels's solution as he's correct, the box model dictates that elements are rectangles, so the way I was going about this was wrong. However I was able to accomplish what I needed with SVGs. Here's an example Fiddle in case anyone is interested: http://jsfiddle.net/uhrHX/1/
解决方案
The CSS standards do not define this behaviour in level 2 nor 3. All they define is:

  
The :hover pseudo-class applies while the user designates an element with a pointing device, but does not necessarily activate it. For example, a visual user agent could apply this pseudo-class when the cursor (mouse pointer) hovers over a box generated by the element. 
The CSS box model implicitly states that all block elements form rectangular boxes. Just as text will not float in a circular way around your divs, for all intents and purposes your circles are still rectangular in layout, and to Webkit in behaviour. Gecko developers apparently have gone the extra mile to respect border-radius for hovers, but that is actually inconsistent since they don't do it for 'gaps' in backgrounds and the like, which are essentially also just visual changes just like border-radius.

In short, don't expect browser behaviour to change on this, since CSS standards don't define the behaviour. The only way to properly implement it cross-all-browser is with Javascript and some smart Pythagoras calculations on mouse positions.

                        
这篇关于将鼠标悬停在重叠的CSS3形状上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！