title: How to make hovering over one div to trigger changes in another div?
body: <p>I am looking to create the next effect for my next website:</p>
  
  <ol>
  <li>I have 3 DIVs with some text content in the left column.</li>
  <li>I have an image in a div in the right column.</li>
  <li>Image in the right div have 3 different independent image parts, each separate part has to be highlighted when I hover over one of the divs (related to that particular image part) in the column on the left. The DIV I am hovering over has to be highlighted as well on hover.</li>
  <li>I also want the same effect only this time when I hover over any of those image parts in DIV on in the right column. I want it to highlight the related div, as well as highlight image part itself.</li>
  </ol>
  
  <p>I know it all might sound really confusing, so I made a picture hopefully explaining my project visually. (check the attached image).</p>
  
  <p>Now I  am not sure if this can be solely achieved with use of only CSS, or by combination of CSS and jQuery or smn.</p>
  
  <p>If anyone ever encountered similar implementation, or knows where I can find a code example, or could direct me in the right direction, I would really appreciate it!!!</p>
  
  <p><img src="https://i.stack.imgur.com/ElATB.png" alt=""></p>