Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #19775

    I am trying to disable all mouse hover actions on product images. I tried implementing the suggestions at http://www.kriesi.at/support/topic/product-mouse-over and http://www.kriesi.at/support/topic/turn-off-hover-over-image-widget but neither seem to work for me. Caching is disabled. If the user is on the actual product page, I still want them to be able to click on the image and have it enlarge and popup full size, but they have to click on it. I’d like hover actions disabled globally.

    One of the css tweaks I did seem to partially work on the featured images, but not on the other product images.

    For reference, the site I am working on is:

    http://hackerwarehouse.com/ or http://hackerwarehouse.com/shop/ or http://hackerwarehouse.com/product-category/drive-tools/

    #104974

    Hi,

    If you want to disable the hover effect globally, edit js > avia.js then find this code

    //activates the hover effect for image links
    if(jQuery.fn.avia_activate_hover_effect)
    jQuery(container).avia_activate_hover_effect();

    Replace it with

    //activates the hover effect for image links
    //if(jQuery.fn.avia_activate_hover_effect)
    //jQuery(container).avia_activate_hover_effect();

    Regards,

    Ismael

    #104975

    Hi Ismael,

    I commented out the function call in avia.js and emptied the file cache, but the hover effect is still loading. Is there another place this is getting called?

    #104976

    Hi ggee,

    Do you mean you want to remove the effect on product images where the entire thing zooms and the buttons appear? If so, Try adding the following CSS to your Quick CSS (located under the Styling Tab in the theme options) or the custom.css file in the css folder of your theme files:

    .csstransitions #top .products .product:hover>.inner_product, #top .products .product.js_hover:hover>.inner_product{
    width:96%;
    left:0;
    }

    Regards,

    Devin

    #104977

    Hi Devin,

    Your code worked. Sorry that I didn’t explain what I was trying to do more accurately.

    Is it also possible to remove the add to cart and show details button on the hover?

    #104978

    Hi!

    You should be able to hide the buttons with following css code:

    .csstransitions #top .products .product:hover > .inner_cart_button {
    display: none !important;
    }

    Best regards,

    Peter

    #104979

    Peter, I added your code in quick css, reset caches and no effect. Any other suggestions / thoughts on how to remove the add to cart and show details buttons on hover?

    #104980

    Oh perhaps it is in conflict and I need to combine the two css codes from Devin and Peter?

    #104981

    Hey!

    Yes, you need to combine both code snippets :)

    Best regards,

    Peter

Viewing 9 posts - 1 through 9 (of 9 total)

The topic ‘Disable mouse hover actions on product images’ is closed to new replies.