Javascript 一个div内的多个图像更改（图表上的图例）

我有一个饼图，我还有一个图例，上面有文字，可以识别饼图上的每种颜色代表什么。我试图实现一个hover元素，因此当用户将鼠标悬停在图例中的每个单词上时，它基本上通过交换图像来突出显示饼图的该部分。因此，用户有一个参考点

我在图例中有七个单词，每个单词代表它自己的div id=legend1,2,3等，我无法获得HTML代码来处理动态更改饼图div class=chart，基于来自几个不同divsid=legend1,2,3等的悬停命令。。在添加的链接中，如果我仅使用一个divlegend1将div class=chart从其默认图像更改为另一个图像，则该功能会起作用。但是尝试添加多个div legend2、3等会阻止第一个图例悬停效果的工作

我认为这需要javascript，但我不确定。有人能帮我一下吗？如果事实是这样的话，我对javascript不太在行

---

使用这种技术怎么样：

基本上，嵌套的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>

---

谢谢马丁，你的例子很有用。

.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;
}