0

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

这是 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');    
}

效果很好，除了两点：

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

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

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

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

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

4

2 回答 2

2

您可以使用 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/

于 2012-08-24T15:06:32.403 回答
0

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

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

jsFiddle 演示

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

于 2012-08-24T14:42:08.767 回答