jquery mouseenter가 'a'요소에서 작동하지 않습니다. h3에서 정상적으로 작동합니다.

Question

나는 아주 간단한 문제가 있지만, 무엇이 잘못 됐는지를 알 수 없습니다. 이 코드는 모든 것을 말할 것이다 :

$(".all-products h3").mouseenter(function() { 
    $(this).siblings('p').slideDown(200); 
}).mouseleave(function() { 
    $(this).siblings('p').slideUp(500); 
}); 

를 이것은 HTML입니다 :

<a title="xxx" href="#"> 
    <img src="1.jpg"/> 
    <p>description</p> 
    <h3>header3</h3> 
</a> 

그것을 를, 그래서이 사람이 잘 작동하지만 나는 JQuery와에와 H3를 교체 할 때 왜 작동하지 않습니다 이 방법 아래 나던 작업 :

$(".all-products a").mouseenter(function() { 
    $(this).siblings('p').slideDown(200); 
}).mouseleave(function() { 
    $(this).siblings('p').slideUp(500); 
}); 

가의

Answer 1

당신은 형제를 사용하고 있습니다.

이 시도 :

$(".all-products a").mouseenter(function(){ 
      $('p', this).slideDown(200); 
      }).mouseleave(function() { 
      $('p', this).slideUp(500); 
     }); 

Answer 2

$(".all-products a").mouseenter(function() { 
    $(this).find('p').slideDown(200); 
}).mouseleave(function() { 
    $(this).find('p').slideUp(500); 
}); 

형제가 같은 수준에서 존재하는 것 DOM. 귀하의 경우에 .find() 요소를 호출하거나 children()을 호출하려고합니다. 어느쪽으로 든.

Answer 3

a이 p의 형제 아니다, 그것은 p의 부모입니다. 대신 .children('p') 또는 .find('p')을 사용해보십시오 (전자가 더 구체적 임).

Answer 4

글쎄, 중요한 문제는 p 요소가 형제가 아닌 a 인 것 같습니다. siblings()을 children()으로 바꿔야합니다.