別のdivの変更をトリガーするために1つのdivをホバリングする方法は？

Question

私は私の次のウェブサイトのための次のエフェクトを作成するために探しています：

1. 私は左の列の一部のテキストコンテンツを持つ3つのdivを持っています。
2. 私は右の列のdivにイメージを持っています。
3. 右のdivの画像には、3つの異なる独立した画像があります。左側の列にあるdivのうちの1つの上にカーソルを置くと、それぞれの部分が強調表示されます。私がホバリングしているDIVは、ホバリングでも強調表示されなければなりません。
4. また、右の列にあるDIVの画像部分の上にカーソルを置いても、同じ効果が欲しいです。私は関連するdivを強調し、画像部分自体を強調表示したい。

私はすべてが本当に混乱するかもしれないことを知っています。私は、うまくいけば私のプロジェクトを視覚的に説明しました。 （添付画像を確認してください）。

これは、CSSのみ、またはCSSとjQueryまたはsmnを組み合わせて使用​​できるかどうかはわかりません。

誰かが同様の実装に遭遇した場合、またはコード例を見つけることができる場所を知っている場合、または適切な方向に私を誘導できる場合は、本当に感謝します。

Answer 1

あなたは大陸の画像と左にそれに対応するdiv要素の上にマウスオーバーバインディングを設定できます。このような

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

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

Answer 2

何かが動作するはずです。 http://jsfiddle.net/neo108/fCsNN/を参照してください。

mouseoutとmouseoverの機能でマップ内の関連する部分のdivを指定するだけです。