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で「表示」する必要はありません。表示：あなたが必要なものは何もありません。 .show（）を使用すると、次のように表示されます：block