0

我创建了一个非常简单的 javascript 函数，当我将鼠标悬停在某些单词上时，具有某个特定的元素id变得透明。这适用于我的img标签，但div具有相同 id 的 s 没有改变？

这是我的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/

这个 html 正在调用它：

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

但这不是，divs 不会透明。

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

2 回答 2

1

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

以不同的方式命名图像 ID。IE：

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

然后，对两个 ID 执行操作：

function resetReveal() {
    document.getElementById('c1').style.opacity="1";
    document.getElementById('c1_image').style.opacity="1";

此外，从元素<spans>中删除这些 ID 。.bars他们目前什么都不做。

<span class="categories" onMouseOver="revealCategory1()" onMouseOut="resetReveal()">VIDEO</span>
于 2013-03-28T02:40:03.820 回答
0

很抱歉，这是一个很常见的错误，但所有 ID 都必须是唯一的。它是可以复制的名称标签。

另一种想法是使用类元素和 document.getElementsByClassName 方法，然后通过返回的数组来筛选出你想要的那些元素，这对于不允许名称标签的元素来说是一个很好的选择。

于 2014-01-27T22:36:08.980 回答