将鼠标悬停在元素上，并影响另一个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/