我正在使用纯 HTML 和 CSS 创建饼图。我想使用纯 CSS 更改每个饼图段/切片悬停时的背景颜色。纯 Javascript 解决方案是可以接受的，但不是所期望的。我可以使用hover pseudoclass为了这？
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:
.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);
}
我根据每个切片的 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
