div内の複数の画像の変更（グラフの凡例）

Question

私は円グラフを持っていますが、円グラフの各色が何を表しているかを示す凡例もあります。私はホバー要素を実装しようとしているので、ユーザーが凡例の各単語の上を移動すると、円グラフのセクションが強調表示されます（基本的に画像を交換することによって）。だから、ユーザは参照のポイントを持っている

私は凡例で各単語が独自のdiv（id = legend1,2,3など）を表しているので、動的に処理するHTMLコードを取得できませんホバーコマンドからいくつかの異なる divs（id = legend1,2,3など）に基づいて円グラフ（div class = chart）を変更します。追加されたリンクでは、1つのdiv（legend1）を使用してdiv（class = chart）をデフォルト画像から別の画像に変更するだけで動作します。しかし複数のdivを追加しようとすると（legend2,3など）、最初の凡例のホバー効果が機能しなくなります。

これはjavascriptを呼び出すと思いますが、わかりません。誰かがこれで私を助けてもらえますか、実際にはそうであれば、私はジャバスクリプトにあまり熟練していません。

http://jsfiddle.net/6BfR6/46/

Answer 1

はどのようにこの技術を用いについて：絶対

http://jsfiddle.net/KsYrH/1/

基本的にネストされたdivタグは、親要素のホバーとその可能ターゲットを配置しました。いいえjavascriptが必要です。

<ol class="pie"> 
    <li class="slice1">Blueberries 37% 
     <div class="drawing"></div></li> 
    <li class="slice2">Raspberries 23% 
     <div class="drawing"></div></li> 
    <li class="slice3">Cream 50% 
     <div class="drawing"></div></li> 
</ol> 

CSS

.pie { 
    background: #eeeeee; 
    width: 7em; 
    padding: 0.5em; 
    position: relative; /* offset drawings relative to this element */ 
} 

.pie .drawing { 
    position: absolute; /* drawings are absoluted */ 
    height: 20px; 
    bottom: -20px; 
} 

ol li { 
    cursor: pointer; 
} 

.slice1 .drawing { 
    left: 0px; 
    width: 74px; /* 2 x percentage */ 
    background: #6666cc; 
} 
.slice1:hover .drawing { 
    background: #6666ff; 
} 

.slice2 .drawing { 
    left: 74px; 
    width: 46px; /* 2 x percentage */ 
    background: #cc6666; 
} 
.slice2:hover .drawing { 
    background: #ff6666; 
} 


.slice3 .drawing { 
    left: 120px; 
    width: 100px; /* 2 x percentage */ 
    background: #ccaaaa; 
} 
.slice3:hover .drawing { 
    background: #ffeeee; 
}