css悬停对自定义形状图像的影响

Question

我有一张国家的地图..我的任务是在他们将发光的每个区域悬停效果..我不知道我怎么做到这一点..我可以使用html地图标签，如：

<img src="district1.png" width="xxx" height="yyy" alt="d1" usemap="#d1_map">
<map name="d1_map">
        <area shape="poly" coords="0,0, 35,36, 82,126 .... " styles="....">
</map>

但这并不完美，因为你知道地图上没有多边形的形状......还有其他想法吗？提前谢谢..

Answer 1

• 使用地图标记内的区域标记划分地图的每个区域;
• 为地图指定ID或类（例如<map class="mymap">）;

• 使用CSS在您的区域周围创建一个盒子阴影：

  .mymap area:hover{ box-shadow:0 0 15px #ffffff }

当鼠标悬停时，这会让你的区域发光。 基本上，您将一个类分配给地图，以便通过CSS轻松定位其子项。这样，您就不必为每个区域分配一个类。之后，您将其子目标作为目标并使用：hover事件将鼠标悬停在该区域时应用该代码。我真的很好奇，如果它有效，但它应该。