Jump to content

[Solved] Disable Hover Effect in Product Grid List


Recommended Posts

Hello,

Simple question, I'd like to disable this effect in the product list because it doesn't work on Chrome.
This effect is only visible when the list is set on "grid".
Or if you have a solution to make it work on Chrome it would be great.

Too sad this kind of thing from the default template doesn't even work on every browser :/
 

post-806494-0-57849400-1406036421_thumb.png

Edited by Templar77400 (see edit history)
Link to comment
Share on other sites

Thank you vekia
I found a simple solution, in product_list.scss, in the product grid styles :

		@media (min-width: $screen-lg) { // min 1200px
			&.hovered {
				/*.product-container {
					@include box-shadow(rgba(black, 0.17) 0 0 13px);
					position: relative;
					z-index: 10;
					.content_price {
						display: none;
					}
					.product-image-container {
						.content_price {
							display: block;	
						}
						.quick-view {
							display: block;
						}
					}
					.functional-buttons, 
					.button-container, 
					.comments_note {
						display: block;
					}
				}*/
			}
		}

Comment the "hover" part.

Same here if you don't want the h5 title to move when you hover :

	li.hovered{
		h5{
			//min-height: 30px;
		}

In lower screen resolution, the "Add to Cart" and "More Details" were still displayed, but it's very easy to take them off in the css ;) Same for the reviews.
Look in .button-container, .fonctional-buttons, .comments_note ;)

 

Edited by Templar77400 (see edit history)
Link to comment
Share on other sites

  • 2 years later...
  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...