"this"키워드를 사용하여 요소를 타겟팅하는 방법은 무엇입니까?

Question

<div class="col-xs-12 col-sm-4"> 
     <div class="thumbnail-container"> 
      <img class="img-responsive" src="http://placehold.it/1024x768" alt="..."> 
      <div class="thumbnail-overlay"></div> 
      <p class="text-center text-nowrap" style="display:block">title</p> 
     </div> 
    </div> 

function overlay() { 
    $('.thumbnail-container > .text-center').mouseenter(function() { 
     $('.thumbnail-container > .thumbnail-overlay').fadeOut(500) 
    }) 
    $('.thumbnail-container > .text-center').mouseleave(function() { 
     $('.thumbnail-container > .thumbnail-overlay').fadeIn(500) 
    }) 
} 

저는이 중 6 개가 "thumbnail-container"인데, 그 중 하나가 호버링 (분명히) 될 때만 jquery 코드를 실행하고 싶습니다. 지금 내가 "p.text-center"을 가리킬 때 코드는 모든 6 컨테이너의 모든 div를 페이드 아웃합니다. 나는 "this" 키워드를 퍼팅 해봤지만 여전히 작동하지 않습니다.

Answer 1

이벤트 핸들러는 .text-center에,하지만 당신은 페이드 아웃 할 요소는 .thumbnail-overlay과의 형제, 그래서 당신이 할 수 있습니다 :

$(this).siblings('.thumbnail-overlay').fadeOut(500) 

Answer 2

function overlay() { 
    $('.thumbnail-container > .text-center').mouseenter(function() { 
     $(this).parent().find('.thumbnail-overlay').fadeOut(500) 
    }); 
    $('.thumbnail-container > .text-center').mouseleave(function() { 
     $(this).parent().find('.thumbnail-overlay').fadeIn(500) 
    }); 
} 

Answer 3

<p class="text-center text-nowrap" style="display:block" mouseenter="fade_out(this)" mouseleave="fade_in(this)">title</p> 

및

function fade_in(element){ 
    $(element).fadeIn(500); 
} 

function fade_out(element){ 
    $(element).fadeOut(500); 
} 

을