javascript - 1 つの div にカーソルを合わせ、別の div の画像の不透明度に影響を与えます (jquery を使用)

Question

私はこの Web サイトに取り組んでいます: http://users.telenet.be/blijvendvertrek/default.htm。

ここで、 にある 3 つのナビゲーション項目 (「Renovaties」、「Gerechtelijke 専門知識」、または「Over mij」) のいずれかにカーソルを合わせると、その右下にある対応する画像の不透明度が (0.6 から1.0)。

CSS を介して、これらの 3 つの画像のそれぞれに直接カーソルを合わせると不透明度が変化することを確認しましたが、ナビゲーション項目にカーソルを合わせたときに同じ効果が得られないようです。この効果を得るためにスクリプトを挿入しましたが、機能しません。

これは、3 つのナビゲーション項目の 1 つの HTML です。

<div id="navigation">
    <ul>
    <li id="1"><a href="renovaties/renovaties.htm" title="Renovaties">RENOVATIES</a></li>
    </ul>
    </div>

これは、対応するコンテンツ アイテムの html です。

<div id="content">
    <div class="kolom links">
       <a href="renovaties/renovaties.htm" title="Renovaties">
                        <img src="images/Icoon - Renovaties.png" alt="Renovaties" id="img-1"/></a>
    </div>
    </div>

そして、これは私が仕事をすることができないスクリプトです:

$("#img-1, #img-2, #img-3").css('opacity','0.6');

$("#1").hover(function () {
    $('#img-1').css({opacity : 1.0});
  }, 
  function () {
    $('#img-1').css({opacity : 0.6});
  }
);

$("#2").hover(function () {
    $('#img-2').css({opacity : 1.0});
  }, 
  function () {
    $('#img-2').css({opacity : 0.6});
  }
);

$("#3").hover(function () {
    $('#img-3').css({opacity : 1.0});
  }, 
  function () {
    $('#img-3').css({opacity : 0.6});
  }
);

私が間違っていることについてのアイデアはありますか？どうもありがとうございました。