div 내 여러 이미지 변경 (차트의 범례)

Question

원형 차트가 있으며 원형 차트의 각 색이 나타내는 것을 나타내는 단어가있는 범례가 있습니다. hover 요소를 구현하려고합니다. 사용자가 범례의 각 단어를 가리키면 원형 차트의 해당 섹션을 강조 표시합니다 (기본적으로 이미지 교환). 따라서 사용자는 참조 점을 가지고 있습니다

전설에 7 단어가 있습니다. 각 단어는 고유 한 div (id = legend1,2,3 등)를 나타내며 동적으로 처리 할 수있는 HTML 코드를 얻을 수 없습니다. 호두 명령에 따라 divs (id = legend1,2,3 등)의 에서 오는 원형 차트 (div 클래스 = 차트)를 변경하십시오. 링크가 추가되면 div (class = chart)를 기본 이미지에서 다른 이미지로 변경하기 위해 하나의 div (legend1) 만 사용하는 경우 작동합니다. 하지만 여러 div (legend2,3 등)를 추가하면 첫 번째 범례 호버 효과가 작동하지 않습니다.

이 자바 스크립트가 필요하다고 생각하지만 확실하지 않습니다. 누군가가 나를 도와주세요, 사실 자바 스크립트에 익숙하지 않은 경우 사실입니다.

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

Answer 1

어떻게이 기술을 사용하는 방법에 대해 : 절대

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

기본적으로 중첩 된 div 태그는 부모 요소 호버하여 해당 할 수있다 대상 위치. 자바 스크립트가 필요하지 않습니다.

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