爲什麼我的DIV不響應我的Javascript不透明度函數？

我創建了一個非常簡單的javascript函數，當我將鼠標懸停在某些單詞上時，具有特定id的元素變得透明。這與我的img標籤正常工作，但具有相同標識的div不會更改？爲什麼我的DIV不響應我的Javascript不透明度函數？

這裏是我的javascript：

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 s不透明。

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

來源

2013-03-28 Mike Harvey

您的頁面中沒有重複的（一式三份？）ID，是嗎？ – isherwood 2013-03-28 02:40:39

您不能有兩個（或更多）具有相同ID的元素。

將圖像ID命名爲不同。即：

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

然後，在兩個ID執行操作：

此外，刪除從<spans>這些ID在你.bars元素。他們目前沒有做任何事情。

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

來源

2013-03-28 02:40:03

非常感謝！超快速響應！ – 2013-03-28 03:44:56

遺憾地說，但它是一個很常見的錯誤，但所有的ID必須是唯一的。它的名稱標籤可以被複制。

另一種想法是使用一個類元素和document.getElementsByClassName方法，然後通過返回的數組來處理所需的元素，這對於不允許使用名稱標記的元素來說是一個好選擇。

來源

2014-01-27 22:36:08

爲什麼我的DIV不響應我的Javascript不透明度函數？

回答

相關問題