CODEWITHSUNDEEP
javascriptjquery
zaib
zaib

Reputation: 5

Show and hide a div in jquery

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

Upvotes: 0

Views: 136

Answers (8)

Sridhar R
Sridhar R

Reputation: 20428

Try this

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

DEMO

Upvotes: 0

Sergio Marcelino
Sergio Marcelino

Reputation: 1146

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

Upvotes: 0

Taintedmedialtd
Taintedmedialtd

Reputation: 896

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.

Upvotes: 1

s4m0k
s4m0k

Reputation: 568

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

});

Upvotes: 0

Govinda Rajbhar
Govinda Rajbhar

Reputation: 3034

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

Upvotes: 0

Ankit Tyagi
Ankit Tyagi

Reputation: 2375

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

Upvotes: 0

Sudharsan S
Sudharsan S

Reputation: 15403

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

Upvotes: 0

Felix
Felix

Reputation: 38112

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

Upvotes: 0

Related Questions