Show and hide a div in jquery

Question

I'm facing an issue, issue is I've a product page where image thumbnails are appearing, i want when user hover or mouseenter on any thumnail the associated 'add to cart' button should appear, current when i mouseenter on any product all 'add to cart' buttons are appearing, link is: http://etekstudio.org/demo/crateen/en/men cod is:

jQuery(document).ready(function(){
var target = jQuery('.product-image');
jQuery(target).mouseenter(function(){
            jQuery('.popUpPrice button ').show();
        });
    });

Answer 1

I'd go with something like this:

jQuery(document).ready(function(){
    jQuery(".product-image").hover(function(){
        jQuery(this).find(".popupPrice button").show();
    }, function() {
        jQuery(this).find(".popupPrice button").hide();
    });
});

That way it hides it on mouse exit as well.

Answer 2

Try to use:

jQuery(document).ready(function(){
    var target = jQuery('.product-image');
    target.mouseenter(function(){
        jQuery(this).find('.popUpPrice button').show();
    });
});

Also target is already a jQuery object. You can just use target.mouseenter instead of jQuery(target).mouseenter

Answer 3

Try this:

jQuery(".product-image").mouseenter(function(){
    jQuery('.popUpPrice button').show();
});

use hover in jquery

jQuery(".product-image").hover(
  function() {
           jQuery('.popUpPrice button ').show();
    }, function() {
            jQuery('.popUpPrice button ').hide();
    }
);

Answer 4

try this :

jQuery(document).ready(function(){
         jQuery('.product-image').hover(function(){
                jQuery(this).next('.popUpPrice').find('button').show();
         },function(){
                jQuery(this).next('.popUpPrice').find('button').hide();
         });
    });

Answer 5

Try it.

And you also don't have need to create new object with the name target .You an do directly with this way also.

jQuery(document).ready(function(){
    jQuery('.product-image').mouseenter(function(){
        jQuery(this).find('.popUpPrice button').show();
    });
});

Answer 6

Try this

$('.product-image').hover(function(){
$(this).next('.popUpPrice').find('.disc button').show();
},function(){
$(this).next('.popUpPrice').find('.disc button').hide();
});

DEMO

Answer 7

You can try this:

jQuery(document).ready(function(){
     var target = jQuery('.product-image'); 
     target.each (function () {
         jQuery(this).mouseenter(function(){
              jQuery(this).find('.popUpPrice button').show()
         });
     });

});

Answer 8

inside the function

you are selecting all elements with '.popUpPrice button', you must find the correct button to show.

in this html structure, for instance:

<div class="product">
    <div class="product-image><img src="" /></div>
    <div class="popUpPrice"><button>Add to cart</button></div>
</div>

all you have to do is:

jQuery('.product-image').mouseenter(function(evt) {
    var target = jQuery(evt.currentTarget);
    target.parent().find('.popUpPrice button').show();
});

evt.currentTarget is the element which triggered the event. In this case will always be .product-image