Несколько наложений DIV на одной странице

Question

Этого кода

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

накладки второго DIV поверх первого, но перерывы для нескольких экземпляров на одной странице. Думаю, мне нужно поставить $(this). где-то там, но не могу понять, где.

Любая помощь приветствуется.

Answer 1

Вы можете получить к нему доступ путем обхода. Предполагая, что это дочерний элемент «один», это применит эффект только к детям с именем «overlay» зависающего элемента «один».

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

Heres ссылка jQuery tree traversal.

Answer 2

Вы правы, вы действительно нуждается в this:

JQuery:

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

Вот jsFiddle (с высотой уменьшенной для удобного просмотра).

Путь «это» здесь заключается в том, что, когда вы наводите над .one div, «это» относится к div, который вы нависаете над. Функции внутри события hover будут ссылаться на зависание div и делать то, что вы хотите сделать с ними. Без «этого» действия, которые вы применяете в своих функциях, будут применены ко всем элементам с классом «overlay», а не только наложением внутри div, зависающего. «это» фактически ограничивает действия, применяемые на основе зависающего элемента («это»). Другими словами, $(".overlay",this) квалифицирует контекст и ограничивает его.