Question

我试图通过旋转重叠的div来制作饼图。我需要对鼠标悬停或悬停采取行动。如果第一个和最后一个切片的总和是180度或大于180度，那么每件事都能正常工作。但是，如果总和低于此值，它就会停止进行悬停事件。请拜访 http://jsfiddle.net/fjBfE/

这里当我将鼠标悬停在绿色切片上时 - 在某些点上鼠标悬停不起作用，并且在某些时候它正在工作。

Answer 1

这个模型存在这个固有的问题。如果你想将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 ......你知道。（再次）

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

1 个答案: