javascript - 图像映射为圆形区域设置背景图像

Question

我创建了一个带点的图像映射。现在我想在 CSS Hover 处更改点的颜色或图像。是否可以用 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>

Answer 1

<map>和 <area>元素旨在定义图像内的可点击区域，它们不能像您通常对其他元素所做的那样设置样式。因此，您不能为它们添加背景图像或颜色。您应该使用另一种类型的元素并将它们放置在您的图像(或另一个带有背景图像的容器)的顶部，并使它们可点击。

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

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

#map {
  width: 500px;
  height: 500px;
  background: url(https://picsum.photos/500);
  position: relative;
}

#dot {
  position: absolute;
  left: 279px;
  top: 280px;
  width: 14px;
  height: 14px;
  border-radius: 100%;
  background: dodgerblue;
}

#dot:hover {
  cursor: pointer;
  background: tomato;
}

<div id="map">
  <div id="dot"></div>
</div>