Survolez un élément et modifiez l'opacité d'un autre élément dans un autre div

Question

J'essaie de créer un effet où, lorsque vous survolez un élément de liste, il change l'opacité d'une image (dans un div complètement différent) de 0 à 1. Je n'ai aucun problème à le faire en CSS lorsque je survole l'img lui-même ou ses éléments parents. Mais cela me bouscule. Voici ce que j'ai (je suis vraiment nouveau à jquery, donc tout peut être faux).

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

Et mon jquery discutable:

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

Je suppose une chose qui ne va pas est que je besoin de trois déclarations de vol stationnaire différentes pour chacune des trois li/combinaisons img. Comme je l'ai dit, je suis très nouveau à jquery, donc désolé si la réponse est simple. J'ai fait des recherches sur les forums et je n'ai pas trouvé de solution. Bien sûr, je préférerais trouver une solution css mais je ne pense pas qu'il y en ait une.

Mise à jour/Solution:

@ Jason. Voici votre jquery a changé un peu pour faire exactement ce que je voulais. Je me suis débarrassé de la première déclaration puisque j'avais déjà une opacité fixée à 0 dans le CSS et je n'avais pas besoin de jquery pour le faire. Puis en survolant le li change l'opacité des images avec .css. Le problème consistait à utiliser .css pour redéfinir l'opacité à 0. Il s'agissait de conserver la déclaration de style en ligne, qui était vissée avec les règles de ma feuille de style. Alors maintenant, quand le hover se termine, je supprime simplement l'attribut inline style avec .removeAttr ('style').

Merci pour l'aide!

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

Il y a probablement une façon plus élégante de le faire ... mais rapide et sale:

$("#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/

Answer 2

Votre code ressemble:

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

il devrait être:

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

En Jquery vous pouvez appeler point par son id en notant avec le signe # et classe avec .(dot) signe

---

NOUVELLE MISE À JOUR:

Voir la démonstration finale que vous voulez: http://jsfiddle.net/rathoreahsan/7NCQu/20/