单个图像的不同部分所需的不同悬停颜色

Question

大家好，我在为图像应用悬停样式方面遇到困难。该图像的形状不规则，并且悬停时的每个部分都需要具有不同的悬停颜色。非常感谢。

Answer 1

SVG确实非常有用，并且看着您的图像，无论如何看起来它已经是矢量图像。如果这样将图像另存为SVG，则svg是纯文本，然后可以提供零件的类名，id等，然后可以使用简单的CSS设置悬停效果的样式。

下面是一个示例，将鼠标悬停在黑色圆圈上以查看其变为不同的颜色。

circle:nth-child(1):hover { fill: red; }
circle:nth-child(2):hover { fill: green; }
circle:nth-child(3):hover { fill: blue; }
circle:nth-child(4):hover { fill: yellow; }
circle:nth-child(5):hover { fill: green; }
circle:nth-child(6):hover { fill: purple; }

<svg>
  <circle cx="50" cy="50" r="30"/>
  <circle cx="150" cy="50" r="30"/>
  <circle cx="250" cy="50" r="30"/>
  <circle cx="50" cy="120" r="30"/>
  <circle cx="150" cy="120" r="30"/>
  <circle cx="250" cy="120" r="30"/>
</svg>

Answer 2

您可以使用区域地图。语法如下：

<map name="myMap">
  <area shape="rect" coords="0,0,10,20" href="somelink.html">
  <area shape="circle" coords="10,30,50,100" href="anotherlink.html">
</map>

您使用坐标定义每个区域。然后，您可以为每个区域分配一个ID，并进行悬停。试试看，让我们知道。

您可以在线使用图像映射生成器，数量很多。我用的是这个：http://imagemap-generator.dariodomi.de/比自己做要容易得多。