Question

I am creating a “quick view” effect for my website. When someone hovers over a product on my website, I have a “quick view” button that appears over the image so that users can click on the button and “zoom in” on the product. I was able to use jQuery to show the “quick view” button on mouseover and I was able to hide the “quick view” button on mouseout. However, when I mouseover/mouseout on one product, the “quick view” effect is displayed over ALL the products and not just the specific product that I have my mouse over.

My products are inside a list with id=ProductGrid. The “quick view” button is contained inside this list and has a class of .quickView. I tried creating a trigger in the li tag with the AddClass()/RemoveClass() functions but it still resulted in the “quick view” being shown over all the products. My goal is to show the “quick view” button only one time on the product that is being hovered over. I realize that the problem I am having is that the mousever event is being applied to ALL the elements. Not sure how to solve this issue.

I am new to jQuery and any help would be much appreciated.

Thank you,

Jon

Here is my HTML for my products:

<ol id="productGrid">

<li><a href=""><img src=""></a><a href="" class="quickView">Quick View</a><br>
<span class="brandName">Gildan</span><br> <span class="productName">Gildan Shirt</span> <br><span class="price">$20</span></li>


<li><a href=""><img src=""></a><a href="" class="quickView">Quick View</a><br>
<span class="brandName">Gildan</span><br> <span class="productName">Gildan Shirt</span> <br><span class="price">$20</span></li>

Here is my JavaScript/jQuery for the quickView button:

$('#productGrid li').mouseover(function() {

$(this).addClass('trigger'); // add class trigger to li element

$('.trigger').mouseover(function() { // shows quickView
$('.quickView').show();
}); // end trigger mouseover
}); // end #productGrid li mouse over

$('#productGrid li').mouseout(function() {

$('.trigger').mouseout(function() { // hides quickView
$('.quickView').hide();
});// end trigger mouseout

$('#productGrid li').removeClass('trigger');

}); // end #productGrid li mouse out

Answer 1

Couple things:

1. You’ll want to move the $('.trigger').mouseover() (and mouseout()) handlers outside of the other mouseover handlers, otherwise you’ll be rebinding every time. You only want those to be defined once. edit: in fact, I don’t understand why you’re dynamically adding that trigger class at all. Just put it in your html to start with or show the quickView on the li hover.

2. The reason you’re seeing all of them is $('.quickView').show(). With that statement you’re selecting ALL elements with the quickView class, not just the nearest one. Since the quickView element is inside your li element, you need to get just that one.

   $(this).parents(".li").find(".quickView").show();