Question

我有一个饼图，我还有一个带有单词的图例，用于标识饼图上每种颜色代表的内容。我正在尝试实现一个悬停元素，因此当用户将鼠标悬停在图例中的每个单词上时，它会突出显示饼图的该部分（主要是通过交换图像）。所以用户有一个参考点

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

我认为这需要javascript，但我不确定。有人可以帮助我这个，我不是太熟练的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;
}

div中的多个图像更改（图表上的图例）

1 个答案: