Не работает стилизация CSS для отдельных путей

У меня есть визуальный объект, который имеет 11 горячих точек, расположенных вокруг png-графики. Я создал отдельные пути для каждого из них и хочу создать ссылку, а также наведение, которое меняет цвет, чтобы показать, какая область выбрана. Ссылка и hover работают для первого графика в списке, но не для всех последующих. CSS выглядит следующим образом:

 #path_cm:hover, #path_rm:hover, #path_is:hover, #path_bc:hover, #path_hr:hover, #path_ict:hover, #path_sc:hover, #path_fa:hover, #path_env:hover, #path_hs:hover, #path_em:hover  {
    opacity: .5
  }

HTML таков (многие строки png-графики удалены, вторая переменная python url - это держатель, чтобы проверить, нужен ли урл для активации hover и будет ли он заменен на настоящий):

Я создал CSS-атрибуты для каждой графики по имени и ожидал, что каждая из них будет изображать полупрозрачный круг; но только первая в списке, path_cm, вела себя так, как и ожидалось.

Перед id="…" [mdn-doc] следует не ставить хэш-знак (#), часть #foo означает "элемент с id foo, а не #foo), так что:

Вы также забыли закрыть теги <a>, поэтому </a> вместо <a>.

Да, в этом-то и была проблема. Никогда не вырезайте и не вставляйте после хорошего бурбона...

Вернуться на верх