Drupal Commerce Kickstart Product list theming

Question

I am Developing a website with Drupal commerce Kickstart.
I want to change the product card UI on Mouseover.
I executed it by adding a script in js file
But It is applied for all product cards.
I want to Apply events for individual product cards.
here is my code!

Drupal.behaviors.Mouse_enter_on_product={
attach: function(context, settings){
  $('.field-type-image').mouseenter(function(){
    $('.field-type-commerce-product-reference').show();
    }); 
  }
}


Drupal.behaviors.Mouse_leave_from_product={
attach: function(context, settings){
  $('.field-type-image').mouseleave(function(){
    $('.field-type-commerce-product-reference').hide();
    }); 
  }  
}

Answer 1

Try this :

Drupal.behaviors.Mouse_enter_on_product={
    attach: function(context, settings){
       $('.field-type-image').mouseenter(function(){
       $(this).parent().find('.field-type-commerce-product-reference').show();
    }); 
    }
}


Drupal.behaviors.Mouse_leave_from_product={
    attach: function(context, settings){
        $('.field-type-image').mouseleave(function(){
        $(this).parent().find('.field-type-commerce-product-reference').hide();
    }); 
    }  
}

You need to show/hide only the hovered product element, so before do any hide/show you need to go up to the parent element and then do a find(). I assume That .field-type-image an .field-type-commerce-product-refrence have a common first ancestor (they are siblings).

You could also do something like

$(this).closest('.class_of_wrapper_for_all_product').find('...').hide() or show()

Good luck