悬停时动画（）影响底层链接答案

【问题标题】：animate() on hover affecting underlying link悬停时动画（）影响底层链接
【发布时间】：2012-08-24 14:35:25
【问题描述】：

我正在创建一种效果，将鼠标悬停在图像上，不透明度会逐渐消失，以显示指向网页其他部分的底层链接。

这里是 jQuery 脚本：

$(document).ready(function(){
   $("#columnRight,#columnRight2,#columnRight3,#columnRight4").hover(function() {
       $(this).stop().animate({opacity: "0.2"}, 'slow');
   },
   function() {
      $(this).stop().animate({opacity: "1"}, 'slow');
   });
});

它针对以下 HTML：

<div id="columnRight">
    <a href="syllabus.html">syllabus</a>
</div>

&CSS：

  #columnRight {
    width: 735px;
    height: 205px;
    margin: 5px 10px 10px 5px;
    float: left; 
    background: url('images/books.jpg');    
}

效果很好，除了两点：

链接在任何动画发生之前通过图像可见。我希望它在悬停效果之前不可见。

链接继承了动画效果，所以当我将鼠标悬停在图像上时，链接会随着背景图像消失。

我一直在研究几种可能的解决方案，但在深入了解其中任何一个之前，我想我会问一下：

创建另一个包含链接的 div，并将其放置在带有背景图像的 div 下方。这样当我.hover时，它会显示下面的链接。

编写另一个脚本，在图像淡出时淡入链接。

【问题讨论】：

如果您只是改变不透明度，我建议使用.fadeTo() 代替动画。动画属性 opacity 就是这样做的，它只操纵它不支持 IE.fadeTo() 将负责跨浏览器淡入淡出。其次，您没有为锚点提供任何样式，因此很难理解“链接可见”的含义。
您应该将图像的 z-index 设置为 1000 或其他内容以使其覆盖链接，然后在悬停时将 z-index 更改为 -1 以使其落在链接后面，然后它们将变得可见。把它想象成一个反向的弹出框。
@Rob 谢谢评论。锚的样式是 font-size: 30px 并且是黑色的。当我希望它位于图像下方时，基本上可以通过图像看到锚点。
另外，.fadeTo() 将与@Laurence 下面的解决方案一起使用吗？
是的，这是一个 .fadeTo() 的新小提琴：jsfiddle.net/2akwx/1

标签： jquery hover jquery-animate

【解决方案1】：

您可以使用 z-index 和绝对定位来使其工作。这是一个 jsFiddle 演示：http://jsfiddle.net/HMxdt/10/

$("#container").hover(function() {
   $(this).find(".overlay").stop().animate({opacity: "0.2", zIndex:"-1"}, 'fast');
   },
   function() {
  $(this).find(".overlay").stop().animate({opacity: "1", zIndex:"1000"}, 'fast');
});

使用 .fadeTo():http://jsfiddle.net/2akwx/1/

【讨论】：

我注意到您有三个 div 用于容器、覆盖和链接。是否有必要拥有容器 div？如果它没有任何相关的属性，它的功能是什么？ ...除了定位属性。
实际上定位属性是它存在的唯一原因。子类上的 position: absolute 将与父 div 相关，因此您可以将父 div 移动到任何您想要的位置。您需要位置样式来让子元素相互叠加（取下它们，看看会发生什么）。

【解决方案2】：

您将它与 div 而非实际的锚元素链接起来。

$("#columnRight a,#columnRight2 a,#columnRight3 a,#columnRight4 a").hover(function() {
     // etc
});

jsFiddle Demo

另外附注：您希望链接事先是-不可见的？怎么会有人知道何时/如何将鼠标悬停在它上面！

【讨论】：

看不到链接的好处。我可以看到这会令人困惑。基本上，图像太大了，它不可能避免在某些时候将鼠标悬停在它上面并触发悬停事件来显示底层文本。