Question

I’m trying to create an effect where when you hover over a list item it changes the opacity of an image (in a completely different div) from 0 to 1. I have no trouble doing it in CSS when hovering over the img itself or its parent elements. But this is stumping me. Here’s what I have (I’m really new to jquery, so it may be all wrong).

<style>
#img-nav img {opacity:0.0;}
#img-nav:hover img {opacity:1.0;}
</style>

<div id=header>
<ul id="nav">
<li id="one"><a href="#">item1</a></li>
<li id="two"><a href="#">item2</a></li>
<li id="three"><a href="#">item3</a></li>
</ul></div>

<ul id="img-nav">
<li><a href="#"><img src="one.jpg" id="img-one"/></a></li>
<li><a href="#"><img src="two.jpg" id="img-two"/></a></li>
<li><a href="#"><img src="three.jpg" id="img-three"/></a></li>
</ul>

And my questionable jquery:

$("#one, #two, #three").hover(function(){
$("#img-one, #img-two, #img-three").css({ opacity:1.0 });
});

I guess one thing that’s wrong is that I need three different hover declarations for each of the three li/img combinations. Like I said, I’m very new to jquery, so sorry if the answer is simple. I did search the boards and couldn’t find a solution. Of course, I’d rather find a css solution but I don’t think there is one.

Update/Solution:

@Jason. Here’s your jquery changed a little to do exactly what I wanted. I got rid of the first declaration since I already had opacity set to 0 in the CSS and didn’t need jquery to do it. Then hovering over the li changes the images opacity with .css. The issue was using .css to change the opacity back to 0. It was keeping the inline style declaration, which was screwing with the rules in my stylesheet. So now when hover ends, I just remove the inline style attribute altogether with .removeAttr (‘style’).

Thanks for the help!

$("#one").hover(function () {
    $('#img-one').css({opacity : 1.0});
  },
  function () {
    $('#img-one').removeAttr("style");
  }
);

$("#two").hover(function () {
    $('#img-two').css({opacity : 1.0});
  },
  function () {
    $('#img-two').removeAttr("style");
  }
);

$("#three").hover(function () {
    $('#img-three').css({opacity : 1.0});
  },
  function () {
    $('#img-three').removeAttr("style");
  }
);

Answer 1

There is probably a more elegant way to do this… but the quick and dirty:

$("#img-one, #img-two, #img-three").css('opacity','0');

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

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

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

http://jsfiddle.net/jasongennaro/KdhPG/