[Product list] Grid - How to disable "Mouse Over" and let users have "add to cart"?

[ayin]

Hi guys,

 

I have been reading the Product-list.tpl, Global.js and Global.css files and I could not understand how to disable the mouse-over and show directly the "Add to Cart" button in the Product-list grid mode.

 

I mean, to disable the mouse-over, one can just comment the code in Global.js, line ~166

unction 
blockHover(status){ $(document).off('mouseenter').on('mouseenter', 
'.product_list.grid li.ajax_block_product .product-container', function(e){
  if ($('body').find('.container').width() == 
1170)  {   var pcHeight = 
$(this).parent().outerHeight();   var pcPHeight = 
$(this).parent().find('.button-container').outerHeight()    + 
$(this).parent().find('.comments_note').outerHeight()    + 
$(this).parent().find('.functional-buttons').outerHeight();   $(this).parent().addClass('hovered').css({'height':pcHeight 
+ pcPHeight, 'margin-bottom':pcPHeight * 
(-1)});  } });
 $(document).off('mouseleave').on('mouseleave', '.product_list.grid 
li.ajax_block_product .product-container', function(e){  if 
($('body').find('.container').width() == 
1170)   $(this).parent().removeClass('hovered').css({'height':'auto', 
'margin-bottom':'0'}); });

The thing that i cannot understand, yet, is how adding the class "hovered" to the '.product_list.grid li.ajax_block_product .product-container' element make all those visual changes? (1, show left block price; 2, show price, 3, hide right block price).

 

Thanks

 

 

By the way, I used Google Inspector mode to achieve these test results.

 

[vekia]

in addition to what you did with bindHover function you have to change css

open product_list.css in line 221 and remove display:none from:

ul.product_list.grid > li .product-container .button-container {
display: none;
}