How to add hover effect for product price in brooklyn theme??

[gurman]

How to add hover effect for product price in brooklyn theme??

[Zworthkey]

@gurman 

Welcome to the Shopify community!
Thanks for your good question.

Please share your store URL.
So that I will check and let you know the exact solution here.

[Sajeel]

share store url

[Denishamakwana]

Welcome to shopify community.

Please share your store URL and if your store is password protected then please provide password too.

Thank you.

[gurman]

www.24hourhype.com

[Sajeel]

@gurman  what you need to do on hover on price?

[Zworthkey]

@gurman 

span.grid-product__price:hover {
    color: red !important;
}

Add this code in the bottom of the theme.css file

1. Navigate to Online Store->Theme->Edit code
2. Asset->/theme.css ->paste above code at the bottom of the file.
3. Save it.

[gurman]

did not work

[gurman]

also theme.css is not there in brooklyn

[Sajeel]

@gurman  its working refresh and then check

[gurman]

but where add it??

[gurman]

i can't find theme.css in assets

'

[Sajeel]

you have theme.scss not theme.css

[gurman]

ok 

[gurman]

[gurman]

did this but still not working

[Sajeel]

@gurman  its working

[gurman]

by hover price, i meant, that the product prices stay hidden unless we hover over the product

[Sajeel]

@gurman  ok then add this code and try

span.grid-product__price{ display:none !important }

span.grid-product__price:hover { color: red !important;display:block !important ;}

[gurman]

https://crepdogcrew.com/ see this website for example

i want the hover like this

[gurman]

@Sajeel 

[Sajeel]

@gurman  use the code i provided

[gurman]

I DID BUT THE PRICE IS STYAING HIDDEN, NOT POPPING UP ON HOVERING THROUGH

[Sajeel]

use this code

@gurman  for animation use this code

span.grid-product__price{ display:none !important }

span.grid-product__price:hover { color: red !important;display:block !important ;transition: color .2s ease-in-out;}

[gurman]

@Sajeel 

[gurman]

pasted the code but still can't see it working

@Sajeel 

[Sajeel]

remove previous code and add this one in theme.scss

span.grid-product__price{ display:none;color:red !important; }

add this code in theme.js 

$(document).ready(function(){
$(".grid-product__wrapper").hover(function(){
$("span.grid-product__price").css("display", "block");
}
});

[gurman]

@Sajeel did but it changed the allignment on the website and also the price is not changing