Limit mouse hover effect

  • dddprinters

    (@dddprinters)


    2 years, 11 months ago

    HI, using woocommerce and oceanWP theme, I am wanting the mouse hover effect on the archive pages only please. So NOT to take place on the site logo or single product pages. I am currently using this code

    .product.type-product:hover img {
    opacity :0.4;
    z-index: -1; 
	-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
    • This topic was modified 2 years, 11 months ago by dddprinters.

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Abhishek

    (@abhikr781)

    2 years, 11 months ago

    Hello,

    Sorry but not getting you to want exactly what you are looking for.
    If you want to remove the logo hover effect, following the doc will help you. https://docs.oceanwp.org/article/541-remove-logo-hover-effect

    Thread Starter dddprinters

    (@dddprinters)

    2 years, 11 months ago

    I would like the hover effect NOT to occur on the single product pages. With the above CSS I have put in, the hover effect is happening everywhere. I guess I need to change the class from product.type-product to something else to narrow down where it is applied?

    Abhishek

    (@abhikr781)

    2 years, 11 months ago

    For the single product page, you need to add the single product class.

    Try this one.

    .single-product .product.type-product:hover img {
    opacity :0.4;
    z-index: -1; 
	-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-ms-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}
    Thread Starter dddprinters

    (@dddprinters)

    2 years, 11 months ago

    ahh yeah that makes it happen on the single product pages right? I am wanting it NOT to happen there. What is the product class for archive pages only?

    Thread Starter dddprinters

    (@dddprinters)

    2 years, 11 months ago

    Found what I wanted thanks. The answer is
    .woocommerce ul.products .product

    Abhishek

    (@abhikr781)

    2 years, 11 months ago

    Glad to hear that you found the solution to the issue.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Limit mouse hover effect’ is closed to new replies.