2

Не работает hover на circle

(https://codepen.io/Veroni1337/pen/wvoXMpQ)

есть вот такое модальное окно, на сайте должно срабатывать при наведении на svg

cайт

(https://twsc.kz/index.php/geography/)

что я делаю не так?

9
  • офигеть вы html завалили 4 мар 2021 в 8:30
  • я доделываю после человека 4 мар 2021 в 8:32
  • Есть какие нибудь варианты что можно сделать? 4 мар 2021 в 8:32
  • 1
    по поводу модалок: codepen.io/topicstarter/pen/JjbZgzW но карту то можно подключить как image прям внутри svg документа и будет тоже самое тоько что будет меньше кода в 1000 раз 4 мар 2021 в 9:14
  • 1
    Ооу) Спасибо, ваш ответ помог. 4 мар 2021 в 9:54

1 ответ 1

2

Если ты хочешь, что бы модальное окно появлялось когда наводишь именно на желтую точку, то с card__logo убери cursor: pointer - он отвлекает, и не понятно куда нужно наводить. во вторых, у тебя в codepen - модальное окно появляется при помощи css, а на сайте при помощи js? на сайте у тебя выскакивает ошибка: modal.js:10 Uncaught TypeError: Cannot read property 'classList' of null at SVGCircleElement. (modal.js:10)

По моему ошибка в том, что он не понимает к какому элементу добавлять класс: document.querySelector**(.${trgs})**.classList.add("view")

(.${trgs}) - это нужно перепроверить.

Так что ищи причину в JS

14
  • 1
    @TricepsSenju тексты есть но они ниже слоем чем ваши шэйпы - соберите все text и поместите их перед закрывающим тегом svg 4 мар 2021 в 11:43
  • 1
    @TricepsSenju да и у всех text у вас одинаковые x="530" и y="220" потому они все будут в одном месте 4 мар 2021 в 11:47
  • 1
    @TricepsSenju codepen.io/topicstarter/pen/LYbBVEz вот так должно быть но только поменяйте координаты для каждого text 4 мар 2021 в 11:52
  • 1
    @TricepsSenju и можете вообще убрать тег a из svg а в css написать circle{cursor: pointer} 4 мар 2021 в 11:55
  • 1
    @TricepsSenju codepen посмотри, вот так должно быть 4 мар 2021 в 12:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.