图像图为圆形区域设置背景图像

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>元素用于定义图像内的可单击区域，无法像通常对其他元素那样设置样式。因此，您不能为其添加背景图像或颜色。您应该使用其他类型的元素，并将其放置在图像（或带有背景图像的另一个容器）的顶部，并使其可单击。