[英]Hover Over Pie Chart Segments (pure CSS)
I am creating a pie chart using pure HTML and CSS.我正在使用纯 HTML 和 CSS 创建饼图。 I want to change the color of the background of each pie chart segment/slice when hovered over using pure CSS.我想在使用纯 CSS 悬停时更改每个饼图段/切片的背景颜色。 Pure Javascript solutions are acceptable, but not desired.纯 Javascript 解决方案是可以接受的,但不是我们想要的。 Can I use the hover
pseudoclass
for this?我可以为此使用hover
pseudoclass
吗?
HTML: HTML:
<div class="pieContainer">
<div class="pieBackground"></div>
<div id="pieSlice1" class="hold"><div class="pie"></div></div>
<div id="pieSlice2" class="hold"><div class="pie"></div></div>
<div id="pieSlice3" class="hold"><div class="pie"></div></div>
</div>
CSS: CSS:
.pieContainer {
height: 150px;
position: relative;
}
.pieBackground {
position: absolute;
width: 150px;
height: 150px;
border-radius: 100%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.5);
}
.pie {
transition: all 1s;
position: absolute;
width: 150px;
height: 150px;
border-radius: 100%;
clip: rect(0px, 75px, 150px, 0px);
}
.hold {
position: absolute;
width: 150px;
height: 150px;
border-radius: 100%;
clip: rect(0px, 150px, 150px, 75px);
}
#pieSlice1 .pie {
background-color: #1b458b;
transform:rotate(120deg);
}
#pieSlice2 {
transform: rotate(120deg);
}
#pieSlice2 .pie {
background-color: #0a0;
transform: rotate(120deg);
}
#pieSlice3 {
transform: rotate(240deg);
}
#pieSlice3 .pie {
background-color: #f80;
transform: rotate(60deg);
}
I changed color on id basis for each slice.我根据每个切片的 id 更改了颜色。
.pieContainer { height: 150px; position: relative; } .pieBackground { position: absolute; width: 150px; height: 150px; border-radius: 100%; box-shadow: 0px 0px 8px rgba(0,0,0,0.5); } .pie { transition: all 1s; position: absolute; width: 150px; height: 150px; border-radius: 100%; clip: rect(0px, 75px, 150px, 0px); } .hold { position: absolute; width: 150px; height: 150px; border-radius: 100%; clip: rect(0px, 150px, 150px, 75px); } #pieSlice1 .pie { background-color: #1b458b; transform:rotate(120deg); } #pieSlice2 { transform: rotate(120deg); } #pieSlice2 .pie { background-color: #0a0; transform: rotate(120deg); } #pieSlice3 { transform: rotate(240deg); } #pieSlice3 .pie { background-color: #f80; transform: rotate(60deg); } #pieSlice1 .pie:hover{ background-color: red; } #pieSlice2 .pie:hover{ background-color: yellow; } #pieSlice3 .pie:hover{ background-color: purple; }
<div class="pieContainer"> <div class="pieBackground"></div> <div id="pieSlice1" class="hold"><div class="pie"></div></div> <div id="pieSlice2" class="hold"><div class="pie"></div></div> <div id="pieSlice3" class="hold"><div class="pie"></div></div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.