将鼠标悬停在元素上并影响另一个div中另一个元素的不透明度 [英] Hover over element and affect opacity of another element in another div

问题描述

我试图创建一种效果，当您将鼠标悬停在列表项上时，它会将图像(在完全不同的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 });
});

我想有一件事是错误的，那就是我需要为三个li/img组合中的每一个都提供三个不同的悬停声明。就像我说的，我对jQuery还很陌生，所以如果答案很简单的话，很抱歉。我确实搜索了董事会，但找不到解决方案。当然，我更愿意找到一个css解决方案，但我认为没有。

更新/解决方案：

@Jason。这是您的jQuery，稍微做了一些更改，以完全按照我的要求进行操作。我去掉了第一个声明，因为我已经将css中的不透明度设置为0，并且不需要jQuery来做这件事。然后，将鼠标悬停在li上会使用.css更改图像的不透明度。问题是使用.css将不透明度更改回0。它保留了内联样式声明，这破坏了我样式表中的规则。因此，现在当悬停结束时，我只需使用.emoveAttr(‘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");
  }
);

推荐答案

可能有一种更优雅的方法来实现这一点...但又快又脏的：

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

这篇关于将鼠标悬停在元素上并影响另一个div中另一个元素的不透明度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！