How to make hovering over one div to trigger changes in another div?

Question

I am looking to create the next effect for my next website:

1. I have 3 DIVs with some text content in the left column.
2. I have an image in a div in the right column.
3. 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.
4. 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.

I know it all might sound really confusing, so I made a picture hopefully explaining my project visually. (check the attached image).

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.

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!!!

Answer 1

You could set up mouseover bindings on your continent image and its corresponding div on the left:

$('.div1').mouseover(hoverOne);
$('.continent1').mouseover(hoverOne);
var hoverOne = function(){
    //hightlight elements
}

//lather...rinse...repeat for the rest

Answer 2

Something like this should work. See http://jsfiddle.net/neo108/fCsNN/ .

Just specify your div's for the related parts in your map in the mouseout and mouseover functions.