重叠的div上悬停事件不起作用

我想通过旋转重叠的div来制作一个饼图。我需要对鼠标悬停或悬停进行操作。如果第一个和最后一个切片的总和是180deg或大于180deg，那么每件事情都可以正常工作。但是，如果总和低于此值，它会停止执行悬停事件。请访问 http://jsfiddle.net/fjBfE/重叠的div上悬停事件不起作用

这里的时候，我就在某些点上其鼠标悬停不工作绿色slice--并在某些点的工作做的鼠标悬停。

来源

2012-02-24 Swati

我认为问题是与相邻切片的z-index有关。如果您为每个切片添加某种JavaScript“悬停：不{z-index = 0}，会发生什么？（原谅伪代码） – Heroes182 2012-03-01 14:28:21

我已经将它隔离到橄榄绿重叠（不知何故）绿色（但不是蓝色或橙色），但找不到正确的解决方案来纠正它。 – ScottS 2012-03-03 20:26:21

Swati我认为你还没有找到你的解决方案。你可以去与jQuery？ – 2012-03-24 11:24:31

这个模型存在这个固有的问题。如果你想保持div元素的循环，你必须

要么，增加他们在递增顺序保持他们的z-index相同
或以任何顺序，但与他们的z-index增加添加它们。

这里就是我的意思：

<html> 
<head> 
<style type="text/css"> 
    .pieContainer{ 
    position:relative; 
    } 
.pie { 
      position: absolute; 
      width: 300px; 
      height: 300px; 
     /* -moz-border-radius: 150px; 
      -webkit-border-radius: 150px; 
      -o-border-radius: 150px; 
     border-radius: 150px; 
/*   */ clip: rect(0px, 300px, 150px, 150px); 
    } 

    #pie1{ 
     background-color:#ff0000; 
     -webkit-transform:rotate(0deg); 
      z-index:100; 
    } 
    #pie2{ 
     background-color:#00ff00; 
     -webkit-transform:rotate(60deg); 
      -moz-transform:rotate(60deg); 
      -o-transform:rotate(60deg); 
      transform:rotate(60deg); 
      z-index:100; 
    } 
    #pie3{ 
     background-color:#0000ff; 
     -webkit-transform:rotate(120deg); 
      -moz-transform:rotate(120deg); 
      -o-transform:rotate(120deg); 
      transform:rotate(120deg); 
      z-index:100; 
    } 
    #pie4{ 
     background-color:#ffff00; 
     -webkit-transform:rotate(180deg); 
      -moz-transform:rotate(180deg); 
      -o-transform:rotate(180deg); 
      transform:rotate(180deg); 
      z-index:100; 
    } 
    #pie5{ 
     background-color:#ff00ff; 
     -webkit-transform:rotate(240deg); 
      -moz-transform:rotate(240deg); 
      -o-transform:rotate(240deg); 
      transform:rotate(240deg); 
      z-index:100; 
    } 
    #pie6{ 
     background-color:orange; 
     -webkit-transform:rotate(300deg); 
      -moz-transform:rotate(300deg); 
      -o-transform:rotate(300deg); 
      transform:rotate(300deg); 

      z-index:100; 
    } 
    /
    /*#pie7{ 
    position:absolute; 
     width:50px; 
     height:150px; 
     background-color:#ff0000; 
     z-index:101; 
     left:150px; 
     -webkit-border-radius: 150px; 

    }*/ 
    .pie{z-index:1;} 

    .pie:hover{ 
     background-color:#000000; 

     } 
     #idea{-webkit-transform:rotate(20deg); 
     position:absolute; 
     top:100px; 
     left:700px; 
     z-index:1000; 
     } 
</style> 
</head> 
<body> 

<div class="pieContainer"> 
    <div class="pieBackground"></div> 
    <div id="pie1" class="pie"></div> 
    <div id="pie2" class="pie"></div> 
    <div id="pie3" class="pie"></div> 
    <div id="pie4" class="pie"></div> 
    <div id="pie5" class="pie"></div> 
    <div id="pie6" class="pie"></div> 
    <div id="pie7"></div> 
</div> 
<div id="idea">idea</div> 
</body> 
</html>

删除代码中的开头这样评论：/* -moz-border-radius: 150px;，事情看起来圆。

http://jsfiddle.net/KzG2Z/：方一

http://jsfiddle.net/KzG2Z/1/：圆一个

如果你可以使用有可以使用很酷的JS解决方案。

http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart

http://g.raphaeljs.com/

在你试图做到底是那种亲密的电路设计，它关闭。（不能自己）（电路是多余的）

也有一些问题，如果你想动态地做到这一点，甚至在你解决这个问题之前，你是被迫的，因为你没有使用JS | jQuery，如果你有，有API ...你知道。（再次）

来源

2012-03-24 12:57:06