Question

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

这是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时，它会显示下面的链接。



在图像淡出时写下另一个淡化链接的脚本。

Answer 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/

Answer 2

您将它与div连接而不是实际的锚元素。

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

jsFiddle Demo

另外注意：你希望链接是-invisible-事先？怎么会有人知道何时/如何将鼠标悬停在它上面！

悬停时的animate（）会影响底层链接

2 个答案: