How can I reset hover CSS color after a click on mobile?

Store Design
1

Hey guys,

So I’m okay now at doing CSS but I’ve never been able to figure this out even after searching online…

I have an add-to-cart button which is blue, on hover and active we have it as pink.

The problem is that on mobiles, after clicking the add to cart button, until the user clicks the page in a different location or scrolls, the button background on mobile remains pink (hover and active).

After a button press can you get the CSS to return back to the original blue colour on mobiles?

Thanks,

George

2

Hi @George_Greenhil ,

Can you please share the page URL so I can guide/help you based on shared URL.

3

https://ultpc5eztnr0dxme-22594233.shopifypreview.com/collections/frontpage/products/milky-way-protein-bar-1x50g

You will need to view it on a mobile to see it stay pink in the background, on desktop it does change back.

@Akibhusen

4

HI @George_Greenhil ,

Please add the below lines of code at the end of your theme–critical.css file.

@media(max-width:767px){
body .product-page--wrapper .product-buy-buttons--cta:hover{
	background-color:#51baf7 !important;
}
}

let me know if you are still facing same issue.

5

Hey @Akibhusen ,

So that does technically fix the issue by overwriting it on small screens to just not have a hover colour but we still ideally wanted the hover colour to still be there but just refresh back after a click.

So we still want to try and keep that but get it to revert back after a click or an action is taken on the button (sorry if that doesn’t sound very clear).

Is that possible? Or would it require JS as well as CSS?

6

If you don’t mind can you please explain in more detail?

OR you can contact me in messages so I get the better idea.

Also, can you please share the preview link? current one is expired. @George_Greenhil