DIVオーバーレイ

Question

このコード

$(document).ready(function(){ 
    $(".one").hover(
     function(){ 
      $(".overlay").fadeTo(200,1).show(); 
     }, 
     function(){ 
      $(".overlay").delay(500).fadeTo(200,0); 
     } 
    ); 
}); 

は、第1、第2の上にDIV、同じページ上の複数のインスタンスのための休憩をオーバーレイします。私は$(this)を置く必要があると思う。どこかにはどこにあるのか分からない。

何か助けていただければ幸いです。

Answer 1

トラバーサルでアクセスできます。それが要素「1」の子であると仮定すると、これは、その要素が「1つ」の「オーバーレイ」という名前の子にのみ適用されます。

$(".one").hover(
    function(){ 
     $(this).children(".overlay").fadeTo(200,1).show(); 
    }, 
    function(){ 
     $(this).children(".overlay").delay(500).fadeTo(200,0); 
    } 
); 

Heres参照番号jQuery tree traversal。そうだね、あなたがthisを必要としなかった

Answer 2

：

jQueryの：

$(document).ready(function(){ 
    $(".one").hover(
     function(){ 
      $(".overlay",this).fadeTo(200,1).show(); 
     }, 
     function(){ 
      $(".overlay",this).delay(500).fadeTo(200,0); 
     } 
    ); 
}); 

はここjsFiddle（見やすくするために減少高さが）です。

"this"の仕組みは、.one divの上にマウスを置くと、 "this"はあなたの上に乗っているdivを指します。ホバーイベント内の関数は、上に乗っているdivを参照し、あなたが何をしたいのかを行います。 「this」がなければ、関数内で適用されるアクションは、div内のオーバーレイがオーバーラップしているだけでなく、「オーバーレイ」クラスを持つすべての要素に適用されます。 "this"は、ホバリングされた要素（ "this"）に基づいて適用されるアクションを事実上制限します。つまり、$(".overlay",this)はコンテキストを修飾し、それを制限します。