Reply To: In mobile product style show summary on hover has 3 actions

Thank you but the css also disable the first click effect so no content appeared. I figured out that i had to remove the css class “hover-ready” and as this class seems to be added using ajax i had to build a jquery that could handle the removal after ajax was finished.

jQuery(window).on('load', function($) {

    var mobile;

    if ( window.innerWidth !== undefined ) {
        mobile = window.innerWidth;
    } else {
        mobile = document.documentElement.clientWidth;
    }

    if ( mobile <= 1024 ) {

    jQuery(document).ajaxStop(function($){
        jQuery( '.product-grid-item' ).removeClass('hover-ready');
    });

    jQuery(".product-grid-item").live('click', function($){
    var ids = jQuery(this).attr('data-id');
    jQuery('.product-grid-item[data-id="' + ids + '"]').addClass('hover-ready');
    });

    jQuery(".load-more-loading").live('click', function($){
    count = 0;
    var timer = setInterval(function($) {
    jQuery( '.product-grid-item' ).removeClass('hover-ready');
    if ( count > 50 ) clearInterval(timer);
    count++;
    }, 100 );
    });

    }

});

This jquery did the trick and only issue is that sometimes ajax uses 1-2 sec to finish so on first visit hover function is not disabled immediately. But then on first click on a product hover is activated on that actual product immediately and also on pagination / load more products it works great as long as i am using the load more button.

You can check it with your phone in my test site and see the scrolling works a lot better without the continues hover effect hiding other products. http://arcticfritid.woo-builds.com/

Brgds
Rune