Magento 2 products disable hover

user_2019456 0
Viewed 2728

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. enter image description here

My website is www.legowatches.com.au

Any tips really appreciated.

magento2 product magento hover
3 Answers

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;
            }
        }
    }
}

user_34302600

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;
}
user_83758620

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;
  }
}

enter image description here

user_100944460
Related