要素の上に移動し、別のdiv内の別の要素の不透明度に影響を与えます

Question

私はリスト項目の上にマウスを置くと、画像の不透明度が0から1に変化します。 img自体やその親要素の上にマウスを置いたときにCSSでやっても問題ありません。しかし、これは私を困惑させている。ここに私が持っているものがあります（私はjqueryにとって本当に新しいので、間違っているかもしれません）。

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

そして、私の疑問のjQuery：

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

私が間違っている一つのことは、私は3李/ IMGの各組み合わせのための3つの異なるホバー宣言を必要とすることであると思います。私が言ったように、私はjqueryにはとても新しいので、答えがシンプルであれば申し訳ありません。私はボードを検索して解決策を見つけることができませんでした。もちろん、私はむしろCSSのソリューションを見つけるだろうが、私はそこにあるとは思わない。

更新/ソリューション：

@Jason。あなたのjqueryはちょうど私が欲しかったことをするために少し変更されました。 CSSで不透明度が0に設定されていて、jqueryを実行する必要はないため、最初の宣言を取り除きました。次に、li上にマウスを置くと、画像の不透明度が.cssに変わります。問題は.cssを使用して不透明度を0に戻していました。スタイルシートのルールに縛られていたインラインスタイルの宣言を保持していました。だから今ホバーが終了したら、私は単にインラインスタイルの属性を.removeAttr（ 'style'）で取り除くだけです。

ありがとうございました！

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

は、おそらくこれを行うには、よりエレガントな方法があります...しかし、迅速かつ汚い：

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

あなたのコードは次のようになります。

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

それは次のようになりますjqueryので

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

あなたは.(dot)記号で#記号とクラスで表すことによって、そのIDによって項目を呼び出すことができます

---

NEW UPDATE：あなたが望むよう

が最終的なデモを参照してください：http://jsfiddle.net/rathoreahsan/7NCQu/20/