Question

我正在尝试创建一种效果，当您将鼠标悬停在列表项上时，它会将图像的不透明度（在一个完全不同的div中）从0更改为1.在将鼠标悬停在CSS上时，我可以毫不费力地在CSS中执行此操作img本身或其父元素。但这让我很难过。这就是我所拥有的（我对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 });
});

我想有一件事是错的，我需要为三个li / 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/

将鼠标悬停在元素上并影响另一个div中另一个元素的不透明度

2 个答案: