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

この効果は、次の2つを除いてうまく機能します。

  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 に答える