Как можно реализовать подобное подсвечивание?

Question

[Yana N]

Подсвечиваеется контур на баннере при наведении на блоки ниже (обогрев трубопроводов, обогрев емкостей и тд) + подсвечивается при наведении на элементы на самом баннере.

tpm-energo.ru

В JS и jQuery совсем немного понимаю поэтому если не сложно, то популярно объяснить и с примером реализации кода :)

Comments

[Alex McArrow]

Думаю при особом желании такое можно и на CSS запилить

[Yana N]

Alex McArrow, в разных блоках находятся элементы поэтому не получится, к сожалению, использовать CSS

[Alex McArrow]

Yana N, в общем - согласен.

Answer 1

[Антон]

https://jsfiddle.net/jdmuung4/

Comments

[Yana N]

Спасибо!

[Антон]

Yana N, Суть то поняли?

[Yana N]

вникаю) но еще не правильно сформулировала вопрос изначально

там где надо этот скрипт реализовать нет самих маркеров
только обводка которая появляется при наведении (обводка - это отдельные картинки которые накладываюся на баннер)+блоки подсвечиваются

[Антон]

Yana N, т.е. исходная картинка без подсвечивания и при наведении она подсвечивается?

[Yana N]

Антон, да

т е при наведении на блоки или при наведении на некоторые зоны баннера, подсвечиваются:
эти зоны и блок с которым он тематически связан

[Антон]

Yana N, Ну значит вам нужна исходная картинка и картинка уже подготовленная с подсвеченными контурами, и по наведению на элемент мы ее заменяем или накладываем поверх.
Соответственно, если нам нужен показ по наведению на элемент из другого блока, их надо связать, и самое простое - через data атрибуты. Укажите элементам один идентификатор и при наведении на одном элементе одного блока, чтобы показывался элемент с этим же атрибутом, но из другого блока.
Банальный пример я Вам скинул, как сие происходит

[Yana N]

Антон, первую часть уже сделала, спасибо за помощь

[Антон]

Yana N, Вот я реализовывал с свое время нечто похожее

[Yana N]

Антон, такое и надо