클릭 팝업 jQuery 내부에서 호버 효과를 적용하는 방법은 무엇입니까?

Question

나는 처음에 클릭 이벤트가 발생할 때까지 숨겨져있는 컨테이너 div가 있습니다. div에 이미지가 들어 있습니다. 그 이미지 위에 호버 효과를 적용하고 싶지만, 호버가 click 이벤트에 의해 무시되고 있기 때문에 호버를 작동시키지 못합니다. 아래는 제 코드입니다. 당신의 hover() 기능에

<div class='comment-click'> 
    <div class="comment-product"> 
     <img class="checkered-shirt" src="img/checkered.jpg" /> 
     <div class="comment-hover-popup"> 
      <img class="popup-pic" src="img/Calvin_pic.png" /> 
      <h2 class="hover-title">Nautica</h2> 
      <p class="description">Nautica Men's Hyannis Shoe</p> 
      <input class="buy" id="buy" type="submit" value="Buy" /> 
      <p class="price">$55</p> 
      <p class="hover-comment-command">Comment (2)</p> 
      <img class="plus-icon" src="img/plus-icon.png" /> 
      <img class="check-icon" src="img/check-icon.png" /> 
     </div> 
    </div> 
    <h1>J.Crew</h1> 
    <p class="product-description">J.Crew Plaid Button Down Shirt</p> 
    <img class="comment-x" src="img/x.png" /> 
    <ul> 
     <li> 
      <div class="comment-one"> 
       <img src="img/Calvin_pic.png" /> 
       <p class="product-commenter">Paul Mickan </p> 
       <p class="product-comment">Love this shirt #hipster</p> 
      </div> 
     </li> 
     <li> 
      <div class="comment-two"> 
       <img src="img/Calvin_pic.png" /> 
       <p class="product-commenter">Calvin Hemington </p> 
       <input class="product-comment" type="text" name="Add a comment..." onfocus="if (this.value=='Add a comment...') this.value = ''" value="Add a comment..." /></a> 
      <input class="comment-post" type="submit" value="Post" /> 
      </div> 
     </li> 
    </ul> 
</div> 

jQuery를

$('.hover-comment-command').click(function() { 
    $('.comment-click').fadeIn(); 
    $('.comment-hover-popup').hide(); 
}); 

$('.comment-x').click(function() { 
    $(".comment-click").fadeOut(); 
}); 

$(".checkered-shirt").hover(function() { 
    $(this).find('.comment-hover-popup').fadeIn(300); 
}, function() { 
    $(this).find('.comment-hover-popup').hide(); 
}); 

Answer 1

사용 $(this).siblings() 대신 $(this).find()는

$(".checkered-shirt").hover(function() { 
    $(this).siblings('.comment-hover-popup').fadeIn(300); 
}, function() { 
    $(this).siblings('.comment-hover-popup').hide(); 
}); 

find()

siblings()가 아니라, SIB위한 것입니다 일치하는 요소의 자손 만입니다 일치하는 요소

See the docs here