apply jquery only to current element-CodePudding

can anyone help me with this. What I'm trying to do is show the product summary only when hovered to product thumbnail. How can I apply the jquery code below to current element only.

jQuery(".product-thumbnail").hover (function() {
   jQuery(".product-summary").attr("id","ps-id");
});
jQuery(".product-thumbnail").mouseout (function() {
   jQuery(".product-summary").removeAttr("id");
});

I tried adding "this" but it doesnt work.

jQuery(".product-thumbnail", this).hover (function() {
    jQuery(".product-summary").attr("id","ps-id");
});
    jQuery(".product-thumbnail", this).mouseout (function() {
jQuery(".product-summary").removeAttr("id");
});

CodePudding user response：

First of all, the jquery´s .hover has two arguments, handlerIn and handlerOut, so you dont need to use mouseleave

inside the hover handler you can refer to the current hovered item with this and by using jQuery(this) it makes all jquery methods available to that element

I´m now assuming that .product-summary is a children of .product-thumbnail so that .find( would find it, maybe using .closest or sth. similiar makes more sense for your markup

jQuery(".product-thumbnail").hover(function() {

   jQuery(this).find(".product-summary").attr("id","ps-id");

}, function() {

   jQuery(this).find(".product-summary").removeAttr("id");

});