將鼠標懸停在元素上，並影響另一個div中另一元素的不透明度

Question

我試圖創建一種效果，當您將鼠標懸停在列表項上時，它將圖像（在完全不同的div）中的不透明度從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 }); 
}); 

我想一件事是錯的，我需要每個三華里/ IMG組合的三個不同的懸停聲明。就像我說的，我對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 }); 
}); 

它應該是：

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

在jQuery中，你可以通過#標誌和階級表示與.(dot)標誌

通過其ID叫項

---

新的更新：

看到最後的演示，只要你想：http://jsfiddle.net/rathoreahsan/7NCQu/20/