Hover over one div, effect the opacity of an image in another div (with jquery)

Question

I'm working on this website: http://users.telenet.be/blijvendvertrek/default.htm .

Now I want to establish that when I hover over one of three navigation items, ('Renovaties', 'Gerechtelijke expertise' or 'Over mij') located in a , the corresponding image in the right below it changes its opacity (from 0.6 to 1.0).

Via CSS, I have already established that each of those three images changes its opacity if you hover over it directly, but I can't seem to generate the same effect when I hover over the navigation items. I've inserted a script to achieve this effect, but it doesn't work.

This is the html for one of the three navigation items:

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

This is the html for the corresponding content item:

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

And this is the script I can't get to work:

$("#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});
  }
);

Any ideas on what I'm doing wrong? Thank you all very much.

Answer 1

DEMO: http://jsfiddle.net/Xc6ug/2/

Better To use mouseenter and mouseleave instead of hover like this

$("#1").mouseenter(function () {
$('#img-1').css({"opacity","1"});
});

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

Answer 2

id cannot be only numeric in html < 5

as your li are in order, you can use .index()

$("#navigation li").hover(function(){
    var n = $(this).index()+1;
    $('#img-'+n).css({opacity:1});
},function(){
    var n = $(this).index()+1;
    $('#img-'+n).css({opacity:0.6});
});

Answer 3

Where you do this code

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

Try setting the opacity instead in a css file or as a inline style when the page loads. Just encase this code is continuously resetting any changes you make on the fly.

Just an idea.