如何用CSS实现PNG饼图segment鼠标悬停高亮效果？

首先明确：纯CSS没法直接识别PNG里的单个饼图区块，但可以通过两种方式实现悬停高亮效果，下面分别说明：

一、CSS叠加层方案 #

原理是在PNG图片上方，给每个饼图区块对应位置创建透明的扇形遮罩（用clip-path绘制），鼠标悬停遮罩时，通过改变遮罩样式实现高亮（比如添加半透明颜色、边框或阴影）。

示例代码：

<div class="pie-container">
  <img src="https://i.ibb.co/QX5nRNh/infographic-pie-test.png" alt="pie_chart" class="pie-img">
  <!-- 每个扇形遮罩对应一个饼图区块 -->
  <div class="pie-segment segment-1"></div>
  <div class="pie-segment segment-2"></div>
  <!-- 更多区块以此类推 -->
</div>

<style>
.pie-container {
  position: relative;
  width: 400px; /* 匹配图片实际宽度 */
  height: 400px;
}
.pie-img {
  width: 100%;
  height: 100%;
}
.pie-segment {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  cursor: pointer;
}
/* 示例：第一个区块的clip-path（需根据实际饼图角度调整） */
.segment-1 {
  clip-path: polygon(50% 50%, 50% 0%, 100% 0%, 100% 50%);
}
.segment-1:hover {
  background-color: rgba(255,255,255,0.3); /* 半透明白色高亮 */
  box-shadow: inset 0 0 10px rgba(0,0,0,0.2);
}
/* 其他区块调整clip-path的坐标即可 */
</style>

这种方案优势是高亮效果可控性强，能实现多种视觉样式，但需要精准计算每个扇形的clip-path参数，适配起来比较繁琐。

二、Image Map方案 #

通过<map>和<area>标签给PNG的每个饼图区块定义可点击的热点区域，再配合CSS或JS实现悬停高亮。

示例代码：

<img src="https://i.ibb.co/QX5nRNh/infographic-pie-test.png" alt="pie_chart" usemap="#pie-map">
<map name="pie-map">
  <!-- 每个area对应一个饼图区块，coords可用在线image map生成器生成 -->
  <area shape="poly" coords="200,200,200,0,400,0,400,200" href="#" alt="Segment 1" class="pie-area">
  <area shape="poly" coords="200,200,400,0,400,400,200,400" href="#" alt="Segment 2" class="pie-area">
  <!-- 更多区块 -->
</map>

<style>
/* 直接给area加hover样式限制较多，简单高亮可用轮廓 */
.pie-area:hover {
  outline: 2px solid #fff;
}
/* 复杂高亮效果可配合JS：hover时显示对应位置的高亮层 */
</style>

这种方案优势是上手快，不需要复杂的CSS形状绘制，用在线工具就能生成coords坐标；缺点是高亮样式的灵活性不如CSS叠加层，默认只能加简单轮廓，复杂效果需要JS辅助。

方案选择 #

• 如果只需要简单的悬停提示或基础高亮，Image Map更简便，快速生成热点即可实现；
• 如果需要自定义高亮视觉效果（比如渐变、阴影、透明度变化），CSS叠加层方案的可控性更强，只是前期需要调整形状参数。

内容的提问来源于stack exchange，提问作者anon_dcs3spp