0

特定の単語にカーソルを合わせると、特定の要素idが透明になる非常に単純な JavaScript 関数を作成しました。これは私の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>

しかし、これは違います。sdivは透明になりません。

<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 を持つ 2 つ (またはそれ以上) の要素を持つことはできません。

イメージ ID に別の名前を付けます。すなわち:

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

また、これらの ID を要素から削除<spans>します.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 に答える