如何将指向变色变成最上一层

如果您想要将鼠标指向时的变色效果放在最上层，可以使用CSS中的`z-index`属性。`z-index`属性用于设置元素的堆叠顺序，数值越大的元素会被放置在数值小的元素上面。

下面是一个示例代码：

<img src="image.jpg" usemap="#hotspots">

<map name="hotspots">
  <area shape="rect" coords="0,0,50,50" href="#" alt="hotspot1">
  <area shape="rect" coords="50,50,100,100" href="#" alt="hotspot2">
</map>

<style>
  area {
    position: relative; /* 设置元素为相对定位 */
    z-index: 1; /* 设置元素的堆叠顺序为1 */
  }

  area:hover {
    background-color: red;
    z-index: 2; /* 设置元素的堆叠顺序为2，放在最上面 */
  }
</style>

在这个示例中，我们首先将热点区域的CSS属性`position`设置为`relative`，这样就可以使用`z-index`属性来控制元素的堆叠顺序。接着，我们将热点区域的`z-index`属性设置为1，使其默认放在图像的下面。然后，在`:hover`伪类选择器中，我们将热点区域的`z-index`属性设置为2，使其放在最上层。

这样，当鼠标指向热点区域时，该区域的背景颜色就会变为红色，并且放在最上层。