'Magento 2 products disable hover

I have Magento 2 Luma theme installed. I want to remove the hover effect on my products' page and the 'add to cart' button be visible all the time. This works on my homepage but not any other products page.

My website is www.legowatches.com.au

Any tips really appreciated.

Solution 1:^[1]

Try to do it.

.products-grid {
    .product-item-info {
        &:not(:hover):not(.active) {
            .product-item-inner {
                position: relative;
                height: auto;
                width: auto;
                border: none;
                box-shadow: none;
            }
        }
    }
}

Solution 2:^[2]

This is what I came up with. This should remove hover, not sure about the "addtocart" though.

.block.widget .products-grid .product-item 
.product-item-inner, .page-layout-1column 
.block.widget .products-grid .product-item 
.product-item-inner, .page-layout-3columns 
.block.widget .products-grid .product-item 
.product-item-inner {

margin: -1px;
}

.products-grid .product-item-inner {

border: none;
margin: 11px 0 0 2px;
padding: 11px 11px 9px;
position: inherit;
}

.products-grid .product-item-info:hover, 
.products-grid .product-item-info.active {

border: none;
margin: 0;
padding: 0;
}

.abs-visually-hidden-desktop-s, .products-grid 
.product-item-info:not(:hover):not(.active) .product-item-inner {

margin: 2px;
}

Solution 3:^[3]

With rafaga's answer and some changes this worked for me

& when (@media-common =true) {
 .products-grid {
    .product-item-info {
      &:not(:hover):not(.active) {
        .product-item-inner {
          position: relative;
          height: auto;
          width: auto;
          border: none;
          box-shadow: none !important;
          overflow: unset;
          z-index: 2;
        //   top: 5px;
        }
      }
    }
  }
}

.media-width(@extremum, @break)
  when
  (@extremum = "min")
  and
  (@break = @screen__s) {
  .block.widget .products-grid .product-item .product-item-inner,
  .page-layout-1column
    .block.widget
    .products-grid
    .product-item
    .product-item-inner,
  .page-layout-3columns
    .block.widget
    .products-grid
    .product-item
    .product-item-inner {
    box-shadow: none !important;
  }

  .products-grid .product-item-info:hover .product-item-inner,
  .products-grid .product-item-info.active .product-item-inner {
    display: block !important;
  }

  .products-grid .product-item-inner {
    box-shadow: none !important;
    left: 0px !important;
    right: 0px !important;
    padding: 0px !important;
    position: relative;
    border: none !important;
  }

  .products-grid .product-item-actions {
    margin: 0;
  }

  .products-grid .product-item-info:hover,
  .products-grid .product-item-info.active {
    box-shadow: none !important;
  }
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	rafaga
Solution 2	Esteban Aorta
Solution 3	DharmanBot

'Magento 2 products disable hover

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]

Solution 3:^[3]