Question

The Following is my code but I am having the problem again where I have more then one button on the site and when you hover over the class contentAddToCart then they all pop up. How do I make it so just the one you hover over actives the display.

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;
}

I thought if I did the following it would fix this but maybe I am not understanding something:

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

Answer 1

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

The above won’t work as it’s looking for $(‘.contentPosterBackgroundIcon’) as a child of $(‘.contentAddToCart’).

Try this:

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

It’s looking for a matched element that is a previous sibling.

Also, you don’t need to have “display” in your CSS twice. display:none is all you need. Using .show() will change it to display:block