Disable mouse hover actions on product images « Support Forum | Kriesi.at

Support Forum » Replete

Disable mouse hover actions on product images

9 posts from 4 voices

Started 3 months ago by ggee
Latest reply from Dude
This topic is not a support question

Tags:

ggee
Member

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/

Posted 3 months ago #

Ismael
Moderator

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

Posted 3 months ago #

ggee
Member

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?

Posted 3 months ago #
Devin
Moderator
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
Posted 3 months ago #
ggee
Member

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?

Posted 3 months ago #
Dude
Dude
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
Posted 3 months ago #
ggee
Member

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?

Posted 3 months ago #
ggee
Member

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

Posted 3 months ago #
Dude
Dude

Hey!

Yes, you need to combine both code snippets :)

Best regards,
Peter

Posted 3 months ago #