¿Cómo hacer que se pase el ratón sobre un div para activar cambios en otro div?

Question

Estoy mirando para crear el siguiente efecto para mi siguiente página web:

1. tengo 3 DIV con un cierto contenido de texto en la columna izquierda.
2. Tengo una imagen en un div en la columna de la derecha.
3. La imagen en el div derecho tiene 3 partes diferentes de imágenes independientes, cada parte separada tiene que resaltarse cuando sobrevivo uno de los divs (relacionados con esa parte de la imagen en particular) en la columna de la izquierda. El DIV sobre el que estoy pasando el cursor también debe resaltarse al pasar el mouse sobre él.
4. También deseo el mismo efecto solo esta vez cuando pase el puntero sobre cualquiera de las partes de la imagen en DIV en la columna de la derecha. Quiero que resalte el div relacionado, así como resaltar la parte de la imagen en sí.

Lo sé todo puede sonar muy confuso, así que hice una foto con la esperanza de explicar mi proyecto visualmente. (verifique la imagen adjunta).

Ahora no estoy seguro de si esto solo se puede lograr con el uso de solo CSS, o mediante la combinación de CSS y jQuery o smn.

Si alguien alguna vez se encontró con una implementación similar, o sabe dónde puedo encontrar un ejemplo de código, o puede dirigirme en la dirección correcta, ¡realmente lo agradecería!

Answer 1

Usted podría crear enlaces de pasar el ratón sobre su imagen continente y su correspondiente div a la izquierda:

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

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

Answer 2

Algo como esto debería funcionar. Ver http://jsfiddle.net/neo108/fCsNN/.

Simplemente especifique sus divisiones para las partes relacionadas en su mapa en las funciones mouseout y mouseover.