CODEWITHSUNDEEP
magentohovermagento2product
marilena6
marilena6

Reputation: 97

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

My website is www.legowatches.com.au

Any tips really appreciated.

Upvotes: 3

Views: 3270

Answers (3)

raliqala
raliqala

Reputation: 164

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

Upvotes: 0

Esteban Aorta
Esteban Aorta

Reputation: 3

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

Upvotes: 0

rafaga
rafaga

Reputation: 21

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

Upvotes: 1

Related Questions