내 DIV가 내 Javascript 불투명도 함수에 응답하지 않는 이유는 무엇입니까?

Question

특정 단어 위로 마우스를 가져 가면 특정 id이있는 요소가 투명 해지는 아주 간단한 javascript 함수를 만들었습니다. 이 내 img 태그를 사용하여 잘 작동하지만 동일한 id 가진 div s 변경되지 않습니다? 이 HTML에 의해 호출되는

function revealCategory1() { 
document.getElementById('c2').style.opacity="0.3"; 
document.getElementById('c3').style.opacity="0.3"; 
document.getElementById('c4').style.opacity="0.3"; 
} 

function revealCategory2() { 
document.getElementById('c1').style.opacity="0.3"; 
document.getElementById('c3').style.opacity="0.3"; 
document.getElementById('c4').style.opacity="0.3"; 
} 

function revealCategory3() { 
document.getElem..............etc 

function resetReveal() { 
document.getElementById('c1').style.opacity="1"; 
document.getElementById('c2').style.opacity="1";  
document.getElementById('c3').style.opacity="1";  
document.getElementById('c4').style.opacity="1";  
} 

http://jsfiddle.net/u6XG2/

: 페이지에

<div class="bars"> 
<span class="categories" id="c1" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span> 
<span class="categories" id="c2" onMouseOver="revealCategory2()" onMouseOut="resetReveal()">ANIMATION</span> 
<span class="categories" id="c3" onMouseOver="revealCategory3()" onMouseOut="resetReveal()">DESIGN</span> 
<span class="categories" id="c4" onMouseOver="revealCategory4()" onMouseOut="resetReveal()">WEB-DESIGN</span> 
</div> 

, 이것은 절대적으로 잘 작동

여기 내 자바 스크립트입니다. 이미지는 투명 해집니다.

<div class="logocontainer" > 
<img class="logo" id="c1" src="images/DOSED-C1.png" /> 
<img class="logo" id="c2" src="images/DOSED-C2.png" /> 
<img class="logo" id="c3" src="images/DOSED-C3.png" /> 
<img class="logo" id="c4" src="images/DOSED-C4.png" /> 
</div> 

그러나 이것은 아닙니다. div은 투명하지 않습니다.

<div class="maincontent"> 
<div id="c1" class="content" >VIDEO PIECE 1</div> 
<div id="c2" class="content" >ANIMATION PIECE 1</div> 
<div id="c3" class="content" >DESIGN PIECE 1</div> 
<div id="c4" class="content" >WEB-DESIGN PIECE 1</div> 
</div> 

Answer 1

동일한 ID를 가진 요소를 두 개 이상 가질 수 없습니다.

이미지 ID의 이름을 다르게 지정하십시오. 즉 :

<img class="logo" id="c1_image" src="images/DOSED-C1.png" /> 

그런 다음 두 ID를 작업을 수행합니다

또한

, 당신의 .bars 요소에 <spans>에서 해당 ID를 제거합니다. 그들은 현재 아무 것도하지 않습니다.

<span class="categories" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span> 

Answer 2

미안하지만 꽤 일반적인 실수이지만 모든 ID는 고유해야합니다. 중복 될 수있는 이름 태그입니다.

또 다른 아이디어는 class 요소와 document.getElementsByClassName 메서드를 사용하고 원하는 요소를 선택하여 반환 된 배열을 스풀링하여 이름 태그를 허용하지 않는 요소에 대한 좋은 방법입니다.