Come eseguire il passaggio del mouse su un div per attivare le modifiche in un altro div?

Question

Sto cercando di creare l'effetto prossimo per il mio prossimo sito:

1. Ho 3 DIV con alcuni contenuti di testo nella colonna di sinistra.
2. Ho un'immagine in un div nella colonna di destra.
3. L'immagine nel div di destra ha 3 diverse parti indipendenti dell'immagine, ciascuna parte separata deve essere evidenziata quando si passa con il mouse su una delle div (correlate a quella particolare parte dell'immagine) nella colonna a sinistra. Il DIV che sto passando sopra deve essere evidenziato anche al passaggio del mouse.
4. Voglio anche lo stesso effetto solo questa volta quando passo il mouse su una di quelle parti dell'immagine in DIV nella colonna di destra. Voglio che evidenzi il relativo div, oltre a evidenziare la parte dell'immagine stessa.

So che potrebbe sembrare tutto molto confuso, quindi ho realizzato un'immagine che spero possa spiegare visivamente il mio progetto. (controllare l'immagine allegata).

Ora non sono sicuro che ciò possa essere ottenuto esclusivamente con l'uso di solo CSS o combinazione di CSS e jQuery o smn.

Se qualcuno ha mai riscontrato un'implementazione simile, o sa dove posso trovare un esempio di codice, o potrebbe indirizzarmi nella giusta direzione, lo apprezzerei davvero !!!

Answer 1

È possibile impostare attacchi mouseover vostra immagine sul continente e la sua div corrispondente a sinistra:

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

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

Answer 2

Qualcosa del genere dovrebbe funzionare. Vedi http://jsfiddle.net/neo108/fCsNN/.

Basta specificare i propri div per le parti correlate nella mappa nelle funzioni mouseout e mouseover.