Jquery Show Hide

Question

다음은 내 코드이지만 사이트에 버튼이 하나 이상있는 곳에 문제가 다시 발생하고 contentAddToCart 클래스 위로 마우스를 가져 가면 모든 팝업이 표시됩니다. 마우스를 올려 놓으면 디스플레이가 활성화됩니다.

jQuery를

$('.contentAddToCart').hover(function(){ 
     $('.contentPosterBackgroundIcon').show(); }, 
     function(){ $('.contentPosterBackgroundIcon').hide(); 
    }); 

HTML

<div class="contentPosterBackgroundIcon sprite"></div> 
<a class="contentAddToCart" href="">Buy Now<span></span></a> 

CSS

.sprite { 
    background: url('sprite.png'); 
} 

.contentPosterBackgroundIcon { 
    position: absolute; 
    background-position: -87px -104px; 
    display:block; 
    height:25px; 
    width:7px; 
    top: 22px; 
    left: 88px; 
    display: none; 
} 

나는 그것이이 문제를 해결 할 다음하지만 어쩌면 내가 이해하고 있지 않다 뭔가했다면 내가 생각 :

을

$('.contentAddToCart').hover(function(){ 
     $('.contentPosterBackgroundIcon', this).show(); }, 
     function(){ $('.contentPosterBackgroundIcon', this).hide(); 
    }); 

Answer 1

$('.contentAddToCart').hover(function(){ 
    $('.contentPosterBackgroundIcon', this).show(); }, 
    function(){ $('.contentPosterBackgroundIcon', this).hide(); 
}); 

위의 내용은 $ ('. contentPosterBackgroundIcon')을 $ ('. contentAddToCart')의 하위 항목으로 검색하므로 작동하지 않습니다.

이 시도 : 그것은 이전 형제입니다 일치하는 요소에 대해 찾고

$('.contentAddToCart').hover(function(){ 
    $(this).prev('.contentPosterBackgroundIcon').show(); }, 
    function(){ $(this).prev('.contentPosterBackgroundIcon').hide(); 
}); 

.

또한 CSS에 "표시"가 필요하지 않습니다. display : 아무 것도 필요 없다. .show()를 사용하면 다음과 같이 바뀝니다. block