Mousover effect showing in Firefox, disabled in Safari & Chrome

There was a mouseover effect on all the category pages of this site: https://www.singh-ray.com/product-category/camera-filters/neutral-color-density-filters/

I want there to be NO effect like it currently works in Safari and Chrome. In Firefox, there is still a mouseover event happening and it’s turning the text white, rendering it invisible.

How can I make Firefox behave like Safari here?

Hi There,

Thanks for writing in! Could you please try adding the following CSS rule into your Theme Options > Global CSS area.

.woocommerce li.product .entry-header h3 {
    overflow: visible;
}

Hope that helps.

That didn’t work. the text and all still disappears in Firefox

Hello There,

Thanks updating in! I have inspected your page and I see several invalid codes added in the page. Please check out my screenshots: https://prnt.sc/hyrvgv, https://prnt.sc/hyrvmh

These JS codes should be added in the right place to prevent any conflicts in your site. I also noticed that your custom JS code is using an invalid quotes:

The correct one should be:

jQuery(function($){
  $('.x-navbar').prepend('<div class="x-custom-topbar">Content here</div>');
}); 

All of these errors may have contributed to the issue at hand. Please understand browsers renders the page content differently as they have different browser engine. It may work in work but pose a big issue in other browser. Would you mind providing us your login credentials so that we can investigate further?

Thank you in advance.

Here’s what you need.

Hi There,

Thank you for the credentials, I did go ahead and added the custom CSS below to Theme Options > CSS and that resolves the issue.

/*prevent product list hover animation*/
.woocommerce li.product .entry-wrap,
.woocommerce li.product:hover .entry-wrap {
	top: 0;
}

Please clear your browser’s cache on your end.

Cheers!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.