1

これから： http://www.kylejlarson.com/blog/2011/how-to-create-pie-charts-with-css3/

        .pieContainer {
          height: 100px;
     }
     .pieBackground {
          background-color: grey;
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          -moz-box-shadow: -1px 1px 3px #000;
          -webkit-box-shadow: -1px 1px 3px #000;
          -o-box-shadow: -1px 1px 3px #000;
          box-shadow: -1px 1px 3px #000;
     } 
 .pie {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 50px, 100px, 0px);
     }
     .hold {
          position: absolute;
          width: 100px;
          height: 100px;
          -moz-border-radius: 50px;
          -webkit-border-radius: 50px;
          -o-border-radius: 50px;
          border-radius: 50px;
          clip: rect(0px, 100px, 100px, 50px);
     }
#pieSliceBlue{
    -webkit-transform:rotate(0deg);
          -moz-transform:rotate(0deg);
          -o-transform:rotate(0deg);
          transform:rotate(0deg);

}
 #pieSliceBlue .pie {
          background-color: #1b458b;
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSliceBlue2 {
          -webkit-transform:rotate(180deg);
          -moz-transform:rotate(180deg);
          -o-transform:rotate(180deg);
          transform:rotate(180deg);
     }
     #pieSliceBlue2 .pie {
          background-color: #1b458b;
          -webkit-transform:rotate(40deg);
          -moz-transform:rotate(40deg);
          -o-transform:rotate(40deg);
          transform:rotate(40deg);
     }
     #pieSliceRed {
          -webkit-transform:rotate(220deg);
          -moz-transform:rotate(220deg);
          -o-transform:rotate(220deg);
          transform:rotate(220deg);
     }
     #pieSliceRed .pie {
          background-color: #cc0000;
          -webkit-transform:rotate(140deg);
          -moz-transform:rotate(140deg);
          -o-transform:rotate(140deg);
          transform:rotate(140deg);
     }
#pieSliceBlue .pie:hover{
    background-color: yellow;
}
#pieSliceBlue2 .pie:hover{
    background-color: yellow;
}
#pieSliceRed .pie:hover{
    background-color: yellow;
}



    <div class="pieContainer">
     <div class="pieBackground"></div>
     <div id="pieSliceBlue" class="hold"><div class="pie"></div></div>
     <div id="pieSliceBlue2" class="hold"><div class="pie"></div></div>
     <div id="pieSliceRed" class="hold"><div class="pie"></div></div>
</div>

:hover の追加は、スライス blue2 と red では問題ありませんが、ホバーがスライスの一部でのみ機能する最初のスライスでは問題ありません。

http://jsfiddle.net/gvvsk/1/

4

1 に答える 1

2

その理由は、pieSliceRed(.pie-div のコンテナー) がコンテナーに含まれる pie-div をカバーしているpieSliceRedため、ホバー イベントをキャッチするためです。

あなたのソリューションは間違いなく CSS3 サポートを必要とするため、ポインターイベントを使用してこの動作をバイパスできます。代わりに、この方法で pieSliceRed の css を定義してみてください。

#pieSliceRed {
    pointer-events: none;
    -webkit-transform:rotate(220deg);
    -moz-transform:rotate(220deg);
    -o-transform:rotate(220deg);
    transform:rotate(220deg);
}

詳細については、pointer-events こちらをご覧ください。

于 2013-04-11T19:37:46.360 に答える