Как сделать ховер по Image Map( area)?

Question

[frontAng]

area в коде может быть много
допустим навели ховер на один из area - он поменял цвет

<img src="https://cdn-images-1.medium.com/max/1600/0*H8odJZNPmo13lEJ2" usemap="#image-map" class="map">
  <map name="image-map">
    <area target="" alt="" title="" href="" coords="421,528,383,596,424,672,416,828,455,850,486,836,548,726,613,610,581,583,544,568,461,508" shape="poly">
  </map>

Comments

[Ankhena]

Для таких штук обычно используют SVG.

[frontAng]

Ankhena, в макете он не svg

[Ankhena]

frontAng, перерисуйте или попросите дизайнера

[frontAng]

Ankhena, не подскажете , пожалуйста, как такое сделать? Мой вариант, кажется, неправильным https://jsbin.com/gonunivilo/2/edit?html,css,output

[frontAng]

Ankhena, не подскажете? по вопросу выше

[Ankhena]

frontAng, что именно? Если вас устраивает как работает, то и норм.
А я даже не знаю, что в макете и тз. Подозреваю, что нужен js и кажется, довольно затейливый.

[frontAng]

Ankhena, просто сделать как скрине. 8 пунктов списка. Но они расположены, как на скрине

[Ankhena]

frontAng, если текст и размер шрифта известен, то и пойдёт.