从这里: 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,但不能用于第一个切片,其中悬停仅适用于切片的一部分。
最佳答案
原因是 pieSliceRed
(.pie-div 的容器)覆盖了包含在 pieSliceRed
容器中的 pie-div,从而捕获了悬停事件.
由于您的解决方案绝对需要 CSS3 支持,因此您可以使用指针事件来绕过此行为。尝试以这种方式为 pieSliceRed 定义您的 css:
#pieSliceRed {
pointer-events: none;
-webkit-transform:rotate(220deg);
-moz-transform:rotate(220deg);
-o-transform:rotate(220deg);
transform:rotate(220deg);
}
您可以阅读有关指针事件
的更多信息here .
关于CSS 裁剪、饼图和悬停,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15946025/