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(); }); }); 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.
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
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(); } ); 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(); }); }); 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(); }); }); 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() }); }); }); 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
