我目前正在尝试为我的网站创建一个蓝色、圆形、饼图式的图像。圆圈将被分成 6 个不同的部分。
我想要发生的是，当用户将鼠标悬停在特定段上时，该段将变为橙色，并且与该段对应的圆圈旁边会出现一些文本。
我在网上找到了一些资源，使用 CSS 图像映射几乎可以达到我需要的效果。http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/但是，这些技术使用矩形分割图像。如果我要分割一个圆形对象，我更愿意根据特定的弧线分割该区域。
我认为这超出了纯 HTML 和 CSS 的范围。我对网络语言没有太多经验，尽管我对 JQuery 有过经验。我需要什么技术来解决我的问题，什么技术最适合实施它？
您可以创建不是矩形的图像映射，而是使用多边形形状。
这个有用的工具http://www.image-maps.com/将让您实现您正在寻找的东西，而无需编写自己的多边形映射！
几个选项：
HTML 图像映射
创建一个非常接近圆形每个切片形状的 HTML 图像映射很简单，但是 HTML 图像映射存在一些限制。例如，您不能在图像映射的每个切片中嵌套内容（作为实现悬停弹出窗口的简单方法）。如果 HTML 图像映射对您来说足够了，那么它是最简单的解决方案。
CSS图像映射
要定义圆形切片形状，CSS 图像映射是不切实际的，除非您只需要对每个圆形切片的热点进行非常粗略的近似。但是，如果您可以接受它，那么就功能而言，您将拥有更多的灵活性。
onmousemove
您还可以使用 onmousemove 事件处理程序获取整个圆圈的鼠标坐标，然后进行自己的计算以确定鼠标所在的圆圈切片。这使您可以准确地定义每个圆圈切片的热点，并且您会比 HTML 图像映射具有更大的灵活性。但计算可能需要一些工作。
我有一个解决方案，主要使用 HTML 和 CSS 以及一点点 jQuery 来处理圆圈旁边的文本显示。
然而，它确实使用了一些不是很广泛支持的 CSS 属性，例如pointer-events