Несколько изменений изображения в элементе div (легенда на графике)

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