How to disable the hover effect in Wordpress and Elementor?

Hi all! I created a products section via Elementor in Wordpress. The thing is, that I do not know, how to disable the hover effect.

Topic admin-css css Wordpress

Category Web


When you right-click on each element and click on edit it brings up the block and you can select: Content, Design, Advanced.

Design has the colors and the hover effects. You just need to turn it off on one and copy and Paste Style to the rest of the blocks.


I think the problem comes from something like border-bottom: 3px solid black and not a box-shadow property, which just adds a shadow behind the element. If you find something like that, just do :

.myClass:hover
{
    border-bottom: none;
}

You can put this css into the custom CSS editor on Apperance:

ul.products li.product .button { box-shadow: none; }

If is a template made on Elementor, you can disable box shadows and hover effects on the Style tab of each element:

https://docs.elementor.com/article/230-hover-effects

https://elementor.com/blog/v05-box-shadow-animations/

Edit:

I have my doubts that the CSS that you indicated is the one that is making that effect. Normally, when is a hover effect it should have :hover after the selector:

ul.products li.product .button:hover { box-shadow: none; }

With JavaScript you can also make that effect, so it will help if you provide the link of the website.

About

Geeks Mental is a community that publishes articles and tutorials about Web, Android, Data Science, new techniques and Linux security.