Как сделать так, чтобы наведение курсора на один div запускало изменения в другом div?

Я хочу создать следующий эффект для моего следующего веб-сайта:

1. У меня есть 3 DIV с некоторым текстовым содержимым в левой колонке.
2. У меня есть изображение в div в правой колонке.
3. Изображение в правом div состоит из 3 разных независимых частей изображения, каждая отдельная часть должна быть выделена, когда я навожу курсор на один из div (связанный с этой конкретной частью изображения) в столбце слева. DIV, над которым я нахожусь, также должен быть выделен при наведении.
4. Я также хочу получить такой же эффект, только на этот раз, когда я наведу курсор на любую из этих частей изображения в DIV в правом столбце. Я хочу, чтобы он выделял связанный div, а также выделял саму часть изображения.

Я знаю, что все это может показаться очень запутанным, поэтому я сделал картинку, надеюсь, наглядно объясняющую мой проект. (проверьте прикрепленное изображение).

Теперь я не уверен, можно ли этого добиться исключительно с использованием только CSS или комбинацией CSS и jQuery или smn.

Если кто-нибудь когда-либо сталкивался с подобной реализацией, или знает, где я могу найти пример кода, или может направить меня в правильном направлении, я был бы очень признателен!!!