Javascript 图像贴图设置圆形区域的背景图像

我已经创建了一个带有点的图像地图。现在我想在CSS悬停处更改点的颜色或图像。有可能用CSS解决这个问题，还是需要Javascript？对于HTML区域，我还有哪些其他选项

<img src="map.jpg" usemap="#image-map" style="z-index:1;">

<map name="image-map" id="Image-Maps">
    <area class="one" coords="286,287,7" shape="circle">
</map>

<style>
.one {
width: 100px;
height: 100px;
background: url('point-blue.png');
z-index:2;
}

.one:hover {
background: url('point-red.png');
z-index:2;
}
</style>

.一{
宽度：100px；
高度：100px；
背景：url（'point-blue.png'）；
z指数：2；
}
1.悬停{
背景：url（'point-red.png'）；
z指数：2；
}

和

元素用于定义图像中的可单击区域，它们不能像通常使用其他元素那样设置样式。因此，不能向其添加背景图像或颜色。您应该使用其他类型的元素，并将它们放置在图像（或具有背景图像的其他容器）的顶部，并使它们可单击

.one{
宽度：100px；
高度：100px；
背景：url（'point-blue.png'）；
z指数：2；
}
1.悬停{
背景：url（'point-red.png'）；
z指数：2；
}
#地图{
宽度：500px；
高度：500px；
背景：url(https://picsum.photos/500);
位置：相对位置；
}
#圆点{
位置：绝对位置；
左：279px；
顶部：280px；
宽度：14px；
高度：14px；
边界半径：100%；
背景：道奇蓝；
}
#点：悬停{
光标：指针；
背景：番茄；
}