Search code examples
javascriptcssdebugginghoveronmouseover

How to find the code causes a :hover action on DOM element?


I have element in code. When I mouse over it there shows button on image. I'm trying to find out what code is responsible for that mouse over action.

I tried to make Breaks in Chrome's Dev Tools - no result. I was looking for hover in CSS, no such attributes. I have no ideas what to do next, how to debug that code.

Talking in details, I'm talking about element "add to cart" showing when you hover image on this shop template: https://demo.themeisle.com/shop-isle/product-category/clothing/dresses/

Thanks for any suggestions, Lukasz


Solution

  • Have a look at the :hov option in the Chrome debugging tools under Elements > Styles. You can then trigger various element states (e.g: hover).

    enter image description here

    As explained in the following image, the .product:hover .product-button-wrap style controls how the add button is displayed when the product is hovered over. .product:hover sets the style for all elements with the CSS class product when they are hovered over. .product:hover .product-button-wrap sets the style of any elements with the class product-button-wrap when they belong to an element with class product that is hovered over.

    enter image description here