Jquery显示隐藏

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